CSS Grid Layout: 基础与实战

需积分: 9 149 浏览量更新于2024-07-18 收藏 5.51MB PDF 举报

" Eric A. Meyer 的《GridLayout in CSS - Interface Layout for the Web》是一本深入探讨CSS Grid Layout规范的教程，旨在帮助开发者理解和利用这一现代网页设计中的关键布局技术，无需依赖额外的样式表或传统布局属性如inline和float。本书由O'Reilly Media出版，2016年第一版发行。" 在CSS Grid Layout规范引入后，创建复杂网站的网格布局变得更加简便。这个新标准允许开发者直接在CSS中定义二维网格系统，极大地提升了网页设计的灵活性和效率。CSS Grid Layout的关键知识点包括： 1. **定义Grid容器与Grid项**：通过`display: grid`将父元素设置为Grid容器，而其子元素则成为Grid项。这使得我们可以对整个布局进行精细控制。 2. **Grid轨道与Grid线**：Grid轨道是Grid中行和列的空间，而Grid线则是沿这些轨道的边界线。使用`grid-template-columns`和`grid-template-rows`定义行和列的大小，`grid-gap`定义网格之间的间距。 3. **Grid模板区域**：通过`grid-template-areas`属性，可以定义特定的命名区域，简化复杂的布局设计。 4. **定位Grid项**：使用`grid-column`和`grid-row`属性，可以精确地将Grid项放置在特定的Grid线上，或者使用`grid-area`指定项占据的命名区域。 5. **自动填充与自动扩展**：`auto-fill`和`auto-fit`关键字能自动填充剩余空间，创建等分或灵活的列宽。`fr`单位用于基于可用空间分配网格轨道大小。 6. **响应式设计**：CSS Grid提供了一种声明式的响应式设计方法，通过媒体查询（media queries）可以根据屏幕尺寸改变网格布局。 7. **对齐与对齐模式**：`justify-items`、`align-items`、`justify-content`和`align-content`属性控制网格项在行内和行间的对齐方式，而`align-self`和`justify-self`允许单个项自定义对齐。 8. **兼容性和前缀**：尽管CSS Grid在现代浏览器中得到了广泛支持，但可能需要针对某些浏览器添加厂商前缀（如 `-webkit-`），以确保向后兼容。 9. **实例应用**：书中通过创建一个基本的博客布局来实践这些概念，这通常包括头部、侧边栏、主要内容区和页脚等部分，展示了Grid Layout在实际项目中的应用。通过学习和掌握这些知识点，开发者可以充分利用CSS Grid Layout的优势，创建出更加灵活、响应式且易于维护的网页设计。 Eric A. Meyer的这本书为理解和掌握这项技术提供了全面的指南。

The most fundamental unit is the grid line. By defining the placement of one or more

grid lines, you implicitly create the rest of the grid’s components:

• A grid track is a continuous run between two adjacent grid lines—in other words,

a grid column or a grid row. It goes from one edge of the grid container to the

other. The size of a grid track is dependent on the placement of the grid lines that

define it. These are analogous to table columns and rows. More generically, these

can be referred to as block axis and inline axis tracks, where (in Western lan‐

guages) column tracks are on the block axis and row tracks are on the inline axis.

• A grid cell is any space bounded by four grid lines, with no grid lines running

through it, analogous to a table cell. This is the smallest unit of area in grid lay‐

out. Grid cells cannot be directly addressed with CSS grid properties; that is, no

property allows you to say a grid item should be associated with a given cell. (But

see the next point for more details.)

• A grid area is any rectangular area bounded by four grid lines, and made up of

one or more grid cells. An area can be as small as a single cell, or as large as all

the cells in the grid. Grid areas are directly addressable by CSS grid properties,

which allow you to define the areas and then associate grid items with them.

An important thing to note is that these grid tracks, cells, and areas are entirely con‐

structed of grid lines—and more importantly, do not have to correspond to grid

items. There is no requirement that all grid areas be filled with an item; it is perfectly

possible to have some or even most of a grid’s cells be empty of any content. It’s also

possible to have grid items overlap each other, either by defining overlapping grid

areas or by using grid-line references that create overlapping situations.

Another thing to keep in mind is that you can define as many or as few grid lines as

you wish. You could literally define just a set of vertical grid lines, thus creating a

bunch of columns and only one row. Or you could go the other way, creating a bunch

of row tracks and no column tracks (though there would be one, stretching from one

side of the grid container to the other).

The flip side to that is if you create a condition where a grid item can’t be placed

within the column and row tracks you define, or if you explicitly place a grid item

outside those tracks, new grid lines and tracks will be automatically added to the grid

to accommodate.

Placing Grid Lines

It turns out that placing grid lines can get fairly complex. That’s not so much because

the concept is difficult; there are just so many different ways to get it done, and each

uses its own subtly different syntax.

6 | Grid Layout

剩余82页未读，继续阅读

sliencer

粉丝: 4
资源: 75

CSS Grid Layout: 基础与实战

CSS Grid Layout：构建网页界面布局

CSS网格布局详解：Eric A. Meyer的《GridLayout in CSS》

掌握CSS网格布局与Flexbox布局技术

CSS-Grid-Layout-e-Flexbox

css-grid-layout-1-of-5

css-layout-3-GandoEsprit:GitHub Classroom创建的css-layout-3-GandoEsprit

css-layout-3-sruffilli:GitHub Classroom创建的css-layout-3-sruffilli

live-css-layout:css-layout 的实时编辑器

learning-layout-css-platzi：Platzi CSS布局课程项目，myBlog

css-layout-and-positioning-css布局与定位

最新资源