什么是 CSS Grid？
CSS Grid 是一种新的布局方式，它可以让我们更加轻松地创建复杂的网格布局。CSS Grid 通过将一个容器分成行和列来实现布局，然后将内容放置在这些行和列中。这种布局方式比传统的布局方式更加灵活，可以让我们更加自由地控制网页中的布局。
grid-auto-flow
在 CSS Grid 布局中，grid-auto-flow 属性用于设置自动创建单元格的方式。默认情况下，CSS Grid 会按照从左到右、从上到下的顺序创建单元格。但是，我们可以使用 grid-auto-flow 属性来改变这种方式。
grid-auto-flow 属性有三个可能的值：
- row：按照行的顺序自动创建单元格。
- column：按照列的顺序自动创建单元格。
- dense：尽可能地填充所有的单元格，如果有空白的单元格，就会将后面的单元格填充到前面的空白单元格中。
下面是一个示例代码，演示了如何使用 grid-auto-flow 属性来设置自动创建单元格的方式：
--------------- - -------- ----- ---------------------- --------- ----- --------------- ------- - ---------- - ----------------- ----- -------- ----- ----------- ------- -
在上面的代码中，我们将 grid-auto-flow 属性设置为 column，这样 CSS Grid 就会按照列的顺序自动创建单元格。
grid-auto-rows
在 CSS Grid 布局中，grid-auto-rows 属性用于设置自动创建单元格的高度。默认情况下，CSS Grid 会将所有的单元格高度设置为 auto。但是，我们可以使用 grid-auto-rows 属性来改变这种方式。
grid-auto-rows 属性可以接受一个值，也可以接受多个值，每个值代表一个单元格的高度。如果我们设置多个值，那么 CSS Grid 会按照顺序为每个单元格设置高度。
下面是一个示例代码，演示了如何使用 grid-auto-rows 属性来设置自动创建单元格的高度：
--------------- - -------- ----- ---------------------- --------- ----- --------------- ----- ------ - ---------- - ----------------- ----- -------- ----- ----------- ------- -
在上面的代码中，我们将 grid-auto-rows 属性设置为 100px 和 200px，这样 CSS Grid 就会按照顺序为每个单元格设置高度。
总结
CSS Grid 是一种新的布局方式，它可以让我们更加轻松地创建复杂的网格布局。使用 grid-auto-flow 和 grid-auto-rows 属性，我们可以更加灵活地控制 CSS Grid 中单元格的创建方式和高度。通过学习这些属性，我们可以更加自由地控制网页中的布局，提高网页的可读性和可用性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6601cd77d10417a222d11d88