In-depth understanding of CSS Grid

Introduction

This tutorial takes an in-depth look at CSS Grid Layout and explores almost all of its properties and functionality. After reading this, you'll be able to use this great addition to CSS to work with any layout.

Term: Grid

Grid is a two-dimensional grid system. It can be used to build complex layouts as well as smaller interfaces.

Attribute: display

Just set the display attribute of an element to grid, and it becomes a grid.

.grid-to-be {
    display: grid;
}

This makes .grid-to-be a grid container and its children grid items.

Term: Grid Lines

Grid lines are created when a well-defined grid track is used. You can use them to place grid items.

Term: Grid Track

A grid line is the space between two grid lines. The rows and columns in the grid are grid tracks.

Properties: grid-template-columns

You can use the grid-template-columns property to create columns. To define columns, set the grid-template-columns property to the column size in the order you want them to appear in the grid. Let’s take a look:

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
}

Three columns with a width of 100px are defined here. All grid items will be sorted in these columns. The row height will be equal to the height of the tallest element in the row, but this can be changed with grid-template-rows.

Note that when only columns are defined and no rows are defined, the elements will fill the columns and then wrap around the rows. This is due to Grid's use of grid lines and the implicit grid created by grid lines.

Properties: grid-template-rows

grid-template-rows is used to define the number and size of rows in the grid. Its syntax is similar to grid-template-columns.

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

Having only grid-template-rows without the grid-template-columns attribute will cause the column width to be equal to the width of the widest element in the row.

Attributes: grid-template

grid is the abbreviation of grid-template-rows, grid-template-columns and grid-template-areas.

The usage is as follows:

.grid {
    grid-template:
        "header    header     header"  80px
        "nav       article    article" 600px
        / 100px 1fr;
}

You can define the template area as usual, put the width of each row on the far right, and finally put the width of all columns after the forward slash . Like before, you can put everything on one line.

Data type:

fr is a new unit created for CSS grid layout. fr allows you to create flexible grids without having to calculate percentages, 1fr represents an equal portion of the available space. The available space is divided into the total number of equal parts, so 3fr 4fr 3fr divides the space into 3 4 3 = 10 parts, allocating 3, 4 and 3 equal parts of the available space to the three rows or columns respectively. For example:

.grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
}

If you mix fixed units with flex units, the available space for each equal portion is calculated after subtracting the fixed space. Let's look at another example:

.grid {
    display: grid;
    grid-template-columns: 3fr 200px 3fr;
}

The width of a single equal section is calculated like this: (width of .grid - 200px) / (3 3) . If a gutter exists, its space is initially subtracted from the width of the .grid. This is the difference between fr and %, i.e. the percentage does not include the gutter you defined with grid-gap.

Here 3fr 200px 3fr is basically equal to 1fr 200px 1fr.

Explicit Grid and Implicit Grid

Explicit grid is a grid created using the properties grid-template-rows or grid-template-columns. The implicit grid consists of grid lines and grid tracks created by Grid and is used to save items outside of manually created grids with grid-template-* attributes.

Auto-placement

When we create a grid like this:

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

Even if we only define the columns, as Individual cells that are direct children of the .grid are still placed in rows. This is because the Grid contains automatic placement rules.

Attribute: grid-auto-columns

The size of the columns created by the implicitly created grid column track that is not defined by grid-template-columns can be used with grid-template- columns attribute definition, its default value is auto; you can set it to the value you need.

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-columns: 50px;
}

Properties: grid-auto-rows

grid-auto-rows works similarly to grid-template-columns.

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-auto-rows: 50px;
}

Property: grid-auto-flow

grid-auto-flow property controls how grid cells flow into the grid, and its default value is row.

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-auto-flow: column;
}

The "grid cells" in the above grid will be filled one by one until there are no items left.

Row-based placement

The operation of placing items in a grid using row numbers is called row-based placement.

Property: grid-row-start

If you want a specific grid item to start from a specific row, you can do this:

.grid-item {
    grid-row-start: 3;
}

Property: grid-row- end

If you want a specific grid item to end on a specific row, you can do this:

.grid-item {
    grid-row-end: 6;
}

Property: grid-column-start

If you want a specific The grid items start from a specific column, you can do this:

.grid-item {
    grid-column-start: 3;
}

Property: grid-column-end

If you want a specific grid item to end on a specific column, you can do this :

.grid-item {
    grid-column-end: 6;
}

Attributes: grid-row and grid-column

可以用 grid-row 和 grid-column 属性来手动放置和调整网格项目的大小。每个属性都是其各自的 star 和 end 属性的简写：grid-row-start，grid-row-end，grid-column-start 和 grid-column-end。

用正斜杠 “/ ”来分隔开始和结束值：

.grid-item {
    grid-column: 3 / 5;
    grid-row: 2 / 7;
}

属性：grid-area

你可以把 grid-area 用于对网格行和网格列的简写。它是这样的：

.grid-item {
    grid-area: 2 / 3 / 7 / 5;
}

该代码的行为与上一个标题中的代码相同。

跨网格的元素

要使一个元素跨网格，可以使用 grid-row 或 grid-column 属性。设置起始行 1 和结束行 -1。此处 1 表示相关轴上最左边的网格线，-1 表示相关轴上最右边的网格线。在从右到左的书写脚本中，这是相反的，即 1 表示最右边的行，-1 表示最左边的行。

.grid-item-weird {
    grid-column: 1 / -1;
}

如果你希望单个项目占据整个网格，可以对 grid-row 和 grid-column 都这样做：

.grid-item-weird {
    grid-row: 1 / -1;
    grid-column: 1 / -1;
}

或者简单地：

.grid-item-weird {
    grid-area: 1 / 1 / -1 / -1;
}

关键字：span

当使用 grid-row 和 grid-column 时，不用显式定义行号，而是可以用 span 关键字来声明该项应涵盖的行数或列数：

.grid-item {
    grid-column: 3 / span 2;
}

你也可以把项目固定在终点线上，并朝另一个方向跨越。下面的代码实现了与上面相同的结果：

.grid-item {
    grid-column: span 2 / 5;
}
可

以用相同的方式把 span 应用在行上。

术语：网格单元

网格单元格是四个相交的网格线之间的空间，就像表格中的单元格一样。

术语：网格区域

网格区域是占据网格上一个矩形区域的网格单元。它们是用命名的网格区域或基于行的放置创建的。

属性：grid-template-areas (& grid-area)

除了用诸如 span、grid-column之类的东西放置和调整单个网格项目外，还可以用所谓的“模板区域”。grid-template-area 允许你命名网格区域，以便网格项目可以进一步填充它们。

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 800px 100px;
    grid-template-areas:
        "header     header   header"
        "sidebar-1  content  sidebar-2"
        "footer     footer   footer"
}

这里的一对引号代表一行网格。你可以将所有内容放在一行中，而不用列对齐，但是我所做的只是为了使它看起来更加整洁。我首先定义了三列三行，然后为每个单元命名。通过在第一行中重复执行三次 “header”，告诉 CSS 要做的是用名为 header 的网格项覆盖整个过程。其余的也一样。

以下是通过用 grid-template-areas 命名每个网格项目，使其拥有为其定义的空间的方式：

.header {
    grid-area: header
}
.sidebar-1 {
    grid-area: sidebar-1
}
.content {
    grid-area: content
}
.sidebar-2 {
    grid-area: sidebar-2
}
.footer {
    grid-area: footer
}

没有什么比这更容易了，尤其是用于布置内容的 CSS 其他方法。

在前面你已经看到 grid-area 也用于基于行的定位。

如果想把单元格留空，则可以用点 . 来设置：

.grid {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    grid-template-rows: 100px 800px 100px;
    grid-template-areas:
        "header header header"
        "sidebar content sidebar"
        "footer footer ."
}

在这里，页脚以第二列结束。

属性：grid-template

grid 是 grid-template-rows，grid-template-columns 和grid-template-areas 三个属性的简写。

使用方式如下所示：

.grid {
    grid-template:
        "header    header     header"  80px
        "nav       article    article" 200px
        / 100px auto;
}

可以像通常那样定义模板区域，把每行的宽度放在其最右面，然后将所有列的宽度放在正斜杠之后。像以前一样，你可以把所有得内容放在同一行。

函数：repeat()

repeat() 函数有助于使 网格轨道 列表变得不是那么多余，并为其添加了语义层。使用起来非常简单直观。我们来看一下：

你也可以重复某种形式的轨道列表，如下所示：

.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr 2fr); // this is the same as: 1fr 2fr 1fr 2fr 1fr 2fr
}

repeat() 不必是值的唯一部分。你可以在其前后添加其他的值。例如：grid-template-columns:2fr repeat(5，1fr) 4fr;。

属性：grid

这里的 grid 是 grid-template-rows、 grid-template-columns、 grid-template-areas、 grid-auto-rows、 grid-auto-columns 和 grid-auto-flow 六个属性的简写。

首先，你可以像这样使用 grid-template（上一个示例）：

.grid {
    grid:
        "header    header     header"     80px
        "nav       article    article"    200px
        / 100px auto;
}

其次它不是你看上去的那样，grid 与 css 属性不一样：

是的，你没有看错：一个名为 css 的属性，所有 CSS 属性的简写。我也是在某次思考中偶然知道了它。但是现在我不会教你怎么用，以后有可能会。

第三，你以某种方式使用 grid。你可以将 grid-template-rows 与 grid-auto-columns 或 grid-auto-rows 结合使用。语法非常简单：

.grid-item {
    grid:  / ; 
    grid:  / ; 
}

例如：

.grid-item-1 {
    grid: 50px 200px 200px/ auto-flow 60px;
}
.grid-item-2 {
    grid: auto-flow 50px / repeat(5, 1fr);
}

请注意，在该值之前应该先使用 auto-flow 关键字。

术语：Gutter

Gutter 是单独分隔 网格行 和 网格列 的空间。 grid-column-gap, grid-row-gap 和 grid-gap 是用于定义 gutter 的属性。

属性：grid-row-gap

grid-row-gap 用于定义各个 网格行 之间的空间。它是这样的：

.grid {
    display: grid;
    grid-template-rows: 100px 100px 100px;
    grid-row-gap: 10px;
}

这会将 网格行 彼此隔开10个像素。

属性：grid-column-gap

grid-column-gap 用于定义各个 网格列 之间的空间。它是这样的：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-column-gap: 10px;
}

这会将 网格列 彼此隔开 10 个像素。

属性：grid-gap

grid-gap 是将 grid-column-gap 和 grid-row-gap 结合在一起的简写属性。一个值定义了两个 gutter。例如：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}

属性：order

可以用 order 属性来控制网格单元的顺序。看下面的例子：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}
.grid .grid-cell:nth-child(5) {
    order: 1;
}

在代码中，第五个网格单元被放置在网格的最后，因为其他网格单元根本没有定义顺序。如果定义了顺序，则会遵循数字顺序。两个或多个 网格单元 可以有相同的顺序。具有相同顺序或完全没有顺序的文件将会根据 HTML 文档的逻辑顺序进行放置。再看下面：

.grid {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-gap: 10px;
}
.grid .grid-cell {
    order: 1
}
.grid .grid-cell:nth-child(5) {
    order: 2;
}

上面的例子产生的结果与前面的例子相同。

函数：minmax()

maxmax() 函数是 CSS 网格布局的新增功能。此功能为我们提供了指定 网格轨道 的最小和最大尺寸的方法。

看下面的例子：

.grid {
    display: grid;
    grid-template-columns: 1fr minmax(50px, 100px) 1fr;
}

使用上面的代码，在减小窗口宽度时，中间列将保持 100px 的宽度，直到第一列和最后一列减小到其内容的宽度为止。这对于制作响应式布局特别有用。

关键字：auto

如果父容器的尺寸是固定的（例如固定宽度），则 auto 关键字作为网格项目的宽度将会使该项目充满容器的整个宽度。在有多个项目的情况下，就像 fr 那样划分空间。但是如果将 auto 与 fr 一起使用，则 auto 表现为该项目内容的宽度，剩余的可用空间被划分为 fr。

函数：fitcontent()

当你希望宽度或高度表现得像 auto 一样，但又希望受到最大宽度或高度约束时，可以用 fitcontent() 函数.

.grid-item {
    width: fitcontent(200px);
}

在这里，最小为适合内容，最大为 200px。

关键字：auto-fill

你可以用 auto-fill 来用最多的 网格轨道 填充相关的轴（行或列）而不会溢出。要实现这个目的，需要用到 repeat() 函数：

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 50px);
}

但这会降低单个轨道的灵活性。通过与 minmax() 一起使用，可以同时具有自动填充功能和灵活性。

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
}

这样，你可以至少包含一列，并且在特定浏览器宽度中包含多个 50px 的列。

请注意，即使可能未用单元格填充，auto-fill 也会创建网格轨道。

auto-fit

auto-fit 的行为与 auto-fill 相同，不同之处在于它会折叠所有空的重复轨道。空轨道是指没有放置网格项目或跨越网格项目的轨道。

dense

借助 dense 关键字，你可以将项目回填到 空网格单元 中，这些单元是因为你尝试做了一些的奇怪的事（例如spanning）而被创建的。在任何 span 内你都可以将 dense 关键字与 grid-auto-flow 配合使用，如下所示：

.grid {
    display: grid;
    grid-template-column: repeat(auto-fill, minmax(50px, 1fr));
    grid-auto-flow: dense;
}

你可以把它用在照片库之类的页面中，但在用于表单时要特别小心，因为这可能会打乱表单子元素的特定顺序。

浏览器支持

在撰写本文时，浏览器对 CSS 网格布局有很好的支持。根据 caniuse.com 的说法，除了 Internet Explorer 11部分支持 -ms 前缀和 Opera Mini 之外，所有主流浏览器均支持 CSS 网格布局。

总结

与以前的方法相比，CSS 网格使我们能够以更高的控制力、便捷性和速度来进行布局。在本教程中，我们学习了 Grid 的所有主要元素，包括创建轨道、定位和调整单元格的大小，以及使网格流畅和响应，以及使用诸如 auto-fill 和 minmax() 之类的关键字。

The above is the detailed content of In-depth understanding of CSS Grid. For more information, please follow other related articles on the PHP Chinese website!