初识 CSS Grid 布局，感受强大的布局能力

2024-02-20 14:17:03

Grid 布局简介

Grid布局是W3C提出的一个二维布局系统，它使用 display: grid 属性来定义网格容器，然后通过 grid-template-* 属性来定义网格的布局。网格容器中的元素称为网格项目，每个网格项目都可以通过 grid-column-start、grid-column-end、grid-row-start 和 grid-row-end 属性来设置其在网格中的位置和大小。

Grid 布局的优点

Grid布局具有以下优点：

布局灵活：Grid布局可以创建出各种复杂的布局，而无需使用复杂的HTML结构和CSS代码。
响应式设计：Grid布局支持响应式设计，能够根据屏幕尺寸自动调整布局。
易于使用：Grid布局的语法相对简单，易于学习和使用。

Grid 布局的示例

为了更好地理解Grid布局，我们来看几个示例。

示例 1：一个简单的两列布局

<div class="grid-container">
  <div class="grid-item">列1</div>
  <div class="grid-item">列2</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
}

这个示例中，我们使用 grid-template-columns 属性将网格容器分为两列，每列的宽度都为容器宽度的50%。然后，我们将两个网格项目放入网格容器中，并通过 grid-column-start 和 grid-column-end 属性将它们分别放在第一列和第二列。

示例 2：一个三列布局，中间列宽度是两倍于两侧列

<div class="grid-container">
  <div class="grid-item">列1</div>
  <div class="grid-item">列2</div>
  <div class="grid-item">列3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
}

这个示例中，我们使用 grid-template-columns 属性将网格容器分为三列，中间列的宽度是两倍于两侧列。然后，我们将三个网格项目放入网格容器中，并通过 grid-column-start 和 grid-column-end 属性将它们分别放在第一列、第二列和第三列。

示例 3：一个响应式布局

<div class="grid-container">
  <div class="grid-item">列1</div>
  <div class="grid-item">列2</div>
  <div class="grid-item">列3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-item {
  border: 1px solid #ccc;
  padding: 10px;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  }
}