CSS Grid布局 网格化布局

Grid布局是CSS中一种用于创建网格化布局的功能强大的工具。它可以让你将页面分割成行和列，然后在这个网格中放置元素。

<div class="grid-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>

css 样式

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

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

grid-template-columns: repeat(3, 1fr) 定义了网格的列，这里创建了3列，每列的宽度都是相等的。

grid-gap: 10px 设置了网格之间的间距。

.item 是网格项目，它们将被放置在网格中。你可以添加更多的.item 元素，它们将按照网格的定义自动布局。