CSS Grid 布局 - 附完整示例

Web - Nancy

已于 2025-02-10 10:04:28 修改

阅读量903

点赞数 10

分类专栏： CSS 文章标签： css 前端

于 2025-02-03 09:24:27 首次发布

本文链接：https://blog.csdn.net/m0_48968874/article/details/145012696

版权

CSS 专栏收录该内容

19 篇文章

订阅专栏

CSS Grid 布局是一个强大的布局系统，它可以让你创建复杂的网页布局，并且代码简洁，灵活性高。它基于行和列的网格系统，将页面区域分割成不同的单元格，并允许你在这些单元格中排列内容。

效果

一、基本概念

CSS Grid 布局通过 display: grid; 或 display: inline-grid; 激活。你可以通过行和列定义网格，然后将内容放入这些网格单元格中。

二、创建网格容器

.container {
  display: grid;
}

这个样式声明将 .container 元素转换为网格容器。

三、定义网格行和列

通过 grid-template-rows 和 grid-template-columns 来设置网格的行和列。

.container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr; /* 定义3列 */
  grid-template-rows: 100px 200px; /* 定义2行 */
}

grid-template-columns 定义列的宽度，200px 1fr 2fr 表示三列：第一列宽 200px，第二列占剩余空间的 1/3，第三列占剩余空间的 2/3。
grid-template-rows 定义行的高度，100px 200px 表示第一行高度 100px，第二行高度 200px。

四、网格项的布局

通过 grid-column 和 grid-row 可以控制元素在网格中的位置和跨越的行列数。

.item {
  grid-column: 2 / 4; /* 从第2列到第4列 */
  grid-row: 1 / 2;    /* 从第1行到第2行 */
}

grid-column 控制元素跨越的列范围，2 / 4 表示从第2列到第4列（注意：网格的列和行是从 1 开始编号的）。
grid-row 控制元素跨越的行范围，1 / 2 表示从第1行到第2行。

五、网格间距

通过 gap（或 grid-gap）设置网格之间的间距。

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列 */
  grid-gap: 20px; /* 行列间距为 20px */
}

grid-gap 设置了行间距和列间距，可以分别使用 grid-row-gap 和 grid-column-gap 来设置不同的间距。

六、自适应布局

你还可以使用 auto 和 minmax() 来定义更灵活的布局。

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每列宽度在100px到可用空间之间 */
}

七、对齐和分布

CSS Grid 还提供了对齐和分布的功能，如 justify-items，align-items，justify-content，align-content 等。

justify-items：控制网格项在水平方向上的对齐。
align-items：控制网格项在垂直方向上的对齐。
justify-content：控制整个网格容器在水平方向上的对齐。
align-content：控制整个网格容器在垂直方向上的对齐。

.container {
  display: grid;
  justify-items: center; /* 水平居中对齐 */
  align-items: center;   /* 垂直居中对齐 */
}

八、完整示例

HTML

<div class="container">
  <div class="item item1">项1</div>
  <div class="item item2">项2</div>
  <div class="item item3">项3</div>
</div>

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px 100px;
  gap: 10px;
}

.item {
  background-color: #4CAF50;
  color: white;
  text-align: center;
  padding: 20px;
}

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

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

.item3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}