码农教程 - 一技在手,衣食无忧! tools

目录

CSS 网格简介

❮ 上一节 下一节 ❯

标头

菜单

主要的

正确的

页脚

亲自试一试 »

网格布局

CSS 网格布局模块提供基于网格的布局系统，具有行和列，使设计网页变得更容易，而无需使用浮动和定位。

浏览器支持

所有现代浏览器都支持网格属性。

57.0 16.0 52.0 10 44

网格元素

网格布局由一个父元素和一个或多个子元素组成。

示例

<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 class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9

亲自试一试 »

显示属性

当 HTML 元素成为网格容器时display属性设置为grid或者inline-grid。

示例

.grid-container {
  display: grid;
}

亲自试一试 »

示例

.grid-container {
  display: inline-grid;
}

亲自试一试 »

网格容器的所有直接子级都会自动成为网格项目。

网格列

网格项的垂直线称为列。

网格行

网格项的水平线称为行。

网格间隙

每列/行之间的空间称为差距。

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

  • column-gap
  • row-gap
  • gap

示例

这个column-gap属性设置列之间的间隙：

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

亲自试一试 »

示例

这个row-gap属性设置行之间的间隙：

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

亲自试一试 »

示例

这个gapproperty 是属性的简写row-gap和column-gap特性：

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

亲自试一试 »

示例

这个gap属性还可以用于将行间隙和列间隙设置为一个值：

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

亲自试一试 »

网格线

列之间的线称为柱线。

行之间的线称为行线。

将网格项放入网格容器时请参考行号：

示例

将网格项放置在列线 1 处，并让它在列线 3 上结束：

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

亲自试一试 »

示例

将一个网格项放置在第 1 行，并让它在第 3 行结束：

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

亲自试一试 »

所有 CSS 网格属性

Property Description
column-gap Specifies the gap between the columns
gap A shorthand property for the row-gap and the column-gap properties
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
row-gap Specifies the gap between the grid rows

❮ 上一节 下一节 ❯