CSS网格布局：用grid-row、grid-column和grid-area掌握布局

前端

2023-09-30 16:44:22

CSS 网格布局中的“项目”：打造灵活布局的指南

什么是网格布局的“项目”？

在 CSS 网格布局中，“项目”是指网格中的每个单元格。它可以是简单的文本元素，也可以是复杂的组件或容器。通过对项目进行定位和样式设置，您可以实现各种布局效果。

项目定位属性

有三个属性可用于定位网格布局中的项目：

grid-row： 指定项目的行位置。
grid-column： 指定项目的列位置。
grid-area： 同时指定项目的行和列位置。

grid-row

grid-row 属性接受以下值：

正整数：项目所在的行数
负整数：项目所在的行数，从底部开始算起
auto：项目自动占据一行
span n：项目跨越 n 行

示例：

grid-row: 2; /* 将项目定位在第二行 */

grid-column

grid-column 属性接受与 grid-row 相同的值，用于指定项目的列位置。

示例：

grid-column: 3; /* 将项目定位在第三列 */

grid-area

grid-area 属性接受以下值：

r / c：项目从第 r 行、第 c 列开始
r / c span n：项目从第 r 行、第 c 列开始，跨越 n 行/列

示例：

grid-area: 1 / 3; /* 将项目从第一行第三列开始，占用一格 */
grid-area: 2 / 4 span 2; /* 将项目从第二行第四列开始，跨越两行两列 */

示例：

以下 HTML 和 CSS 代码创建了一个具有两个列和三个行的网格布局：

HTML：

<div class="grid-container">
  <div class="item">项目 1</div>
  <div class="item">项目 2</div>
  <div class="item">项目 3</div>
  <div class="item">项目 4</div>
  <div class="item">项目 5</div>
  <div class="item">项目 6</div>
</div>

CSS：

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

.item {
  border: 1px solid black;
  padding: 10px;
}

/* 设置项目的网格位置 */
.item:nth-child(1) {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.item:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.item:nth-child(3) {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.item:nth-child(4) {
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item:nth-child(5) {
  grid-column: 2 / 3;
  grid-row: 3 / 4;
}

.item:nth-child(6) {
  grid-column: 1 / 3;
  grid-row: 4 / 5;
}