一、概念

要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。

网格容器内放置着由列和行内组成的网格元素。

二、主要属性

1、grid-template-columns

该属性定义了网格布局中的列的数量，它也可以设置每个列的宽度。可选值有：

• px：指定列的宽度，例如 100px。
• fr：指定列的宽度，例如 1fr。
• auto：列的宽度自动分配，例如 auto。
• minmax：指定列的最小和最大宽度，例如 minmax(100px, 1fr)。
• repeat：重复指定列的宽度，例如 repeat(3, 1fr)。

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

2、grid-template-rows

该属性设置每一行的高度。属性值是一个以空格分隔的列表，其中每个值定义相对应行的高度。可选值有：

• px：指定行的高度，例如 100px。
• fr：指定行的高度，例如 1fr。
• auto：行的高度自动分配，例如 auto。
• minmax：指定行的最小和最大高度，例如 minmax(100px, 1fr)。
• repeat：重复指定行的高度，例如 repeat(3, 1fr)。

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

3、gap 间隔

网格间距（Column Gap）指的是两个网格单元之间的网格横向间距或网格纵向间距。

您可以使用以下属性来调整间隙大小：

• grid-column-gap: 指定列之间的间隙。
• grid-row-gap: 指定行之间的间隙。
• grid-gap: 同时指定行和列之间的间隙。

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  grid-gap: 50px 100px;
}

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24