CSS Grid 是一种布局方式，它让 Web 开发人员更加灵活和精确地控制网页布局。CSS Grid 通过将页面划分为行和列的网格，可以快速轻松地设计出复杂布局。在本文中，我们将向您展示一些初学者必知的 CSS Grid 实战技巧，以帮助您更好地掌握这个强大的工具。
创建一个网格容器
首先，让我们创建一个网格容器。在 HTML 中，我们需要添加一个包含所有网格项目的容器元素，然后使用 CSS Grid 属性将其转换为网格容器。
<div class="grid-container"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> <div class="grid-item">Item 4</div> </div>
.grid-container {
display: grid;
}在这个例子中，我们使用 display: grid; 将 .grid-container 元素转换为一个网格容器。现在，我们可以开始将每个子元素放到网格上。
定义行和列
接下来，我们需要使用 grid-template-columns 和 grid-template-rows 属性来定义行和列。这些属性告诉网格容器如何分配空间。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
}上面的代码告诉网格容器，该页面应该有三列，并且前两行的高度为 100 像素。除此之外，还有其他的定义方式，例如使用固定的像素值或百分比。
放置网格项目
一旦您定义了行和列，您可以使用 grid-column 和 grid-row 属性确定每个项目应放置在哪个单元格里。
-- -------------------- ---- ------- ------------------------- - ------------ - - -- --------- - - -- - ------------------------- - ------------ - - -- --------- - - -- - ------------------------- - ------------ - - -- --------- - - -- - ------------------------- - ------------ - - -- --------- - - -- -
上面的代码告诉网格容器，第一个网格项目应该跨越两列，一行，并放置在网格的左上角；第二个项目应该跨越两列，一行，并放置在第二行；第三个项目应该占用一个单元格，并在第二行第一列；最后一个项目应该与第三列相邻，占用第二行第三列的位置。
自动网格布局
除了手动指定单元格位置，我们也可以利用自动网格布局。通过 grid-auto-flow 和 grid-auto-rows 属性，我们可以使网格容器自动为我们分配剩余空间，这对于处理变量或未知的内容非常有用。
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px 100px;
grid-auto-flow: row dense;
grid-auto-rows: 100px;
}在上面的代码中，grid-auto-flow: row dense; 属性告诉网格容器按顺序布置每个项目，并将它们自动放置在网格中。grid-auto-rows: 100px; 属性告诉网格容器为自动放置的项目分配一个高度为 100 像素的行。
响应式布局
最后，让我们探讨一下如何在不同的屏幕大小和设备上实现响应式布局。我们可以使用 media query 来为不同的屏幕宽度设置不同的网格布局。
-- -------------------- ---- -------
------ ----------- ------ -
--------------- -
---------------------- --------- -----
------------------- ----- ------
-
-
------ ----------- ------ -
--------------- -
---------------------- --------- -----
------------------- -----
--------------- --- ------
--------------- ------
-
-在上面的代码中，我们在屏幕宽度大于等于 768 像素时使用四列布局，并在屏幕宽度小于 768 像素时使用两列自动布局，从而实现响应式设计。
总结
在本文中，我们介绍了一些初学者必知的 CSS Grid 实战技巧。这些技巧包括创建网格容器、定义行和列、放置网格项目、使用自动网格布局和实现响应式布局等。
CSS Grid 是一种强大的布局方式，使 Web 开发人员能够更加高效地设计复杂的页面布局。希望这些技巧对于您的下一次项目能够带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cf8269b5eee0b5256c6d30