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

需积分: 9 64 浏览量更新于2024-07-20 收藏 5.38MB PDF 举报

"Grid Layout in CSS" 是一本由 Eric A. Meyer 编著的专业书籍，针对网页界面布局提供深入讲解。这本书是 'Interface Layout for the Web' 系列的一部分，其特别关注于 CSS（Cascading Style Sheets）中的网格布局技术。CSS Grid Layout 是一种强大的工具，它允许设计师在响应式设计中创建复杂的两维布局，将网页元素组织成行和列，实现更灵活且对齐精确的版面结构。在书中，Eric A. Meyer 对 CSS Grid 的原理、语法、实践应用以及其实现原理进行了详尽阐述。读者可以了解到如何定义网格容器、网格线、网格区域、自动网格布局以及如何处理网格的弹性、重复和定位。此外，作者还讨论了网格布局与其他CSS布局模式（如 Flexbox）的对比与互补，帮助读者理解何时选择哪种布局方式。版权信息表明，本书保留所有权利，2016年由 O'Reilly Media, Inc. 出版，适用于教育、商业或销售推广用途。电子版同样可用，访问 Safari Books Online 可获取更多资源。该书的编辑、生产编辑、校对员等人员名单也列出了他们的贡献，以确保内容的质量。 "GridLayout in CSS" 的第一版发布日期为2016年4月14日，并提供了修订历史记录，以供读者查询错误和更新信息。O'Reilly 的标志是其注册商标，而本书封面设计者是 Karen Montgomery。这本书不仅适合前端开发者、设计师和网页构建者深入学习和掌握CSS Grid Layout，也适合希望通过网格布局提升网页设计灵活性和用户体验的专业人士。通过阅读这本书，读者能够了解到如何利用这项强大的工具来创建现代、高效和适应不同屏幕尺寸的网站布局。

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页未读，继续阅读

libingchen

粉丝: 29
资源: 263

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

CSS Grid布局

Designing with CSS Grid Layout 无水印pdf

关于960Grid CSS Framework

css-grid-layout:CSS 网格布局示例

CSS Grid布局教程之浏览器开启CSS Grid Layout汇总

Designing with CSS Grid Layout mobi

Designing with CSS Grid Layout epub

Designing with CSS Grid Layout azw3

cssLayout:CSS 布局

Designing with CSS Grid Layout.en.pdf

最新资源