什么是 CSS Grid？
CSS Grid 是一种用于创建网格布局的 CSS 模块，它让网页设计者可以轻松地将页面分解为行和列，有效地控制页面内元素的位置和大小，从而快速创建响应式布局。
CSS Grid 的好处之一是它与传统的盒模型方法不同之处在于，它是通过分离 CSS 的布局有关部分来实现的。这种分离允许创建布局而不受较低层次的元素大小和位置的影响，并且可以使自适应设计变得容易。
语法
CSS Grid 使用 grid 属性为元素的直接子元素创建网格。网格可以是任意数量的列和行，它们可以通过指定列和行大小的方式自由布局。
---------- - -------- ----- ---------------------- --- --- ---- -- - ---- -- ------------------- ----- -- ----- -- --------- ----- -- -------- -- -
在上面的示例中，我们使用 display: grid 属性将 .container 元素指定为网格布局容器，并使用 grid-template-columns 和 grid-template-rows 属性设置列和行的大小。然后使用 grid-gap 属性来指定列和行之间的间距。
选择器
CSS Grid 为网格容器中的每个子元素提供了一些新的选择器，通过这些选择器可以指定元素在网格中的位置。
grid-row/col
使用 grid-row 和 grid-col 属性，可以将元素放置在指定的行和列上。例如，下面的代码将元素放置在第一行、第一列（左上角）：
----- - --------- -- --------- -- -
grid-row/col-start/end
grid-row-start 和 grid-column-start 属性用于将元素放置在指定的起始位置，grid-row-end 和 grid-column-end 属性用于将元素放置在指定的结束位置。例如，我们可以将元素放置在第一行和第三列之间：
----- - --------------- -- ------------- -- ------------------ -- ---------------- -- -
grid-area
使用 grid-area 属性，可以为元素指定它在一个区域（可以定义多个区域）中所占的列和行，例如：
----- - ---------- - - - - - - -- -
上面的代码将元素放置在从第一行第一列到第三行第三列的区域中。
总结
CSS Grid 是一种用于创建网格布局的强大 CSS 模块，它让页面设计者可以轻松地创建响应式布局。我们看到了创建网格的基本概念、语法和选择器，希望本文可以对你理解和使用 CSS Grid 有所帮助。
以下是一个简单的示例代码，用于演示 CSS Grid 的基本用法：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
---------- - -------- ----- ---------------------- --- --- ---- ------------------- ----- --------- ----- - ----- - ----------------- ----- -------- ----- ----------- ------- - -- ------------- -- ------------------ - --------- -- ------------ -- - -- ------------------ -- ------------------ - --------------- -- ------------- -- ------------------ -- ---------------- -- - -- ------------ -- ------------------ - ---------- - - - - - - -- -
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646bb169968c7c53b0aea320