display grid的基本用法

display:grid 是 CSS 网格布局的一部分，它用于创建一个基于网格的布局系统。网格布局允许开发者通过定义行和列来更精确地控制元素的位置和对齐。以下是 display:grid 的一些基本用法：

一、基本用法

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

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

.grid-item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

在这个例子中：

• .grid-container 被设置为网格布局容器 (display: grid)。
• grid-template-columns: repeat(2, 1fr) 定义了网格有两列，每列占据容器的一半宽度 (1fr 表示 1 份的比例)。
• gap: 10px 定义了网格项之间的间隙。

二、网格模板区域

可以使用 grid-template-areas 来定义网格区域，并通过网格项的 grid-area 属性来放置它们：

<div class="grid-container">
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    'header header'
    'main sidebar'
    'footer footer';
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.header {
  grid-area: header;
  background-color: lightcoral;
}

.main {
  grid-area: main;
  background-color: lightgreen;
}

.sidebar {
  grid-area: sidebar;
  background-color: lightyellow;
}

.footer {
  grid-area: footer;
  background-color: lightblue;
}

在这个例子中：

• grid-template-areas 定义了网格的布局，指定了每个区域的位置。
• 每个网格项通过 grid-area 属性被分配到特定的区域。

三、行和列的自动排列

可以使用 grid-auto-rows 和 grid-auto-columns 属性来定义自动生成的行和列的大小：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-auto-rows: 50px;
  gap: 10px;
}

在这个例子中：

• grid-template-columns: 100px 100px 定义了两个固定宽度的列。
• grid-auto-rows: 50px 定义了自动生成的行的高度为 50px。

四、使用网格线定位元素

可以通过网格线的编号来定位元素：

.grid-item {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

在这个例子中：

• grid-column: 1 / 3 指定元素跨越第 1 列到第 3 列（包括第 1 列但不包括第 3 列）。
• grid-row: 1 / 2 指定元素跨越第 1 行到第 2 行。