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