CSS网格布局是一种强大的前端技术，它使得页面布局变得更加容易和灵活。它可以让我们直接在HTML中定义一个网格系统，然后将内容放入各个网格单元中。
为什么使用Grid布局？
传统的布局方式很难满足现代网站的复杂需求，常见的Flexbox布局虽然能够解决部分问题，但它并不适合用作整体布局。相比之下，Grid布局有以下优势：
- 灵活性：Grid布局提供了更多的布局方式和定位方式，可以轻松实现各种复杂的布局效果。
- 可读性：使用Grid布局可以使代码更加清晰明了，易于阅读和维护。
- 响应式设计：Grid布局可以根据不同的设备屏幕大小和设备方向来处理布局，因此非常适合响应式设计。
如何使用Grid布局？
定义网格容器
要使用Grid布局，首先需要在父元素中定义一个网格容器。可以使用display: grid来创建一个新的网格容器。例如：
.container {
display: grid;
}划分网格单元
一旦定义了网格容器，就可以开始划分网格单元。可以使用grid-template-columns和grid-template-rows属性来定义网格的列和行。例如：
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto 100px;
}这个例子定义了三列和两行的网格，第一行高度自适应，第二行高度为100像素。
放置网格内容
一旦定义了网格容器和网格单元，就可以放置网格内容了。可以使用grid-column和grid-row属性来指定每个网格单元所占据的列和行。例如：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> <div class="item4">Item 4</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ---- ------ - ------ - ------------ - - -- -- ------ -- --------- -- -- ----- -- - ------ - ------------ - - -- -- ------ -- --------- -- -- ----- -- - ------ - ------------ -- -- ----- -- --------- -- -- ----- -- - ------ - ------------ -- -- ----- -- --------- -- -- ----- -- -
这个例子将四个项目放置在一个网格容器中，使用grid-column和grid-row属性分别指定它们所占据的列和行。
示例代码
下面是一个完整的示例代码：
<div class="container"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> <div class="item4">Item 4</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --- --- ---- ------------------- ---- ------ - ------ - ------------ - - -- -- ------ -- --------- -- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------