【前端｜CSS系列第4篇】CSS布局之网格布局

**前端 | CSS系列第4篇: CSS布局之网格布局**

在前面的文章中，我们已经学习了Flexbox布局和Grid布局的基本概念。今天我们将深入探讨Grid布局，了解其特点、优势和应用场景。

**什么是网格布局?**

网格布局（Grid Layout）是一种CSS布局方式，它允许你创建一个由行和列组成的网格系统，用来排列元素。每个元素都可以被放置在网格中，根据其位置、大小等属性，可以实现复杂的布局效果。

**网格布局的特点**

1. **灵活性**: 网格布局允许你自由地调整行和列的数量、大小以及元素的排列方式。
2. **高效**: 网格布局可以有效地利用空间，减少元素之间的间距和重叠。
3. **易于维护**: 网格布局使得布局的维护变得更加容易，因为你只需要修改网格的配置就可以实现全局的变化。

**网格布局的基本概念**

1. **行（Row）**: 行是网格中的一列元素，通常用来排列水平方向上的元素。
2. **列（Column）**: 列是网格中的一行元素，通常用来排列垂直方向上的元素。
3. **单元格（Cell）**: 单元格是网格中的一个小区域，用来放置元素。
4. **网格项（Grid Item）**: 网格项是指被放置在网格中的元素。

**CSS属性**

以下是网格布局中常用的CSS属性：

1. `display: grid`: 声明元素为网格容器。
2. `grid-template-columns`: 定义列的数量和大小。
3. `grid-template-rows`: 定义行的数量和大小。
4. `grid-column-gap` 和 `grid-row-gap`: 设置列和行之间的间距。
5. `justify-items` 和 `align-items`: 设置元素在网格中的对齐方式。

**示例代码**

css.container {
 display: grid;
 grid-template-columns: repeat(3,1fr);
 grid-template-rows: repeat(2,100px);
 gap:10px;
}

.item {
 background-color: #ccc;
 padding:20px;
}

html<div class="container">
 <div class="item">Item1</div>
 <div class="item">Item2</div>
 <div class="item">Item3</div>
 <div class="item">Item4</div>
 <div class="item">Item5</div>
 <div class="item">Item6</div>
</div>