1. 首页
  2. CSS 菜鸟教程
  3. CSS - grid （网格）属性

CSS - grid （网格）属性

CSS grid （网格）属性是一个简写属性，用于在一个声明中声明所有显式和隐式网格属性。

这是一种方便而简洁的方式来定义元素的网格布局。grid 属性是以下与网格相关的各个属性的简写：

可能的值

  • <grid-template> - 工作原理与 grid-template 简写相同。
  • <grid-template-rows> / [ auto-flow & dense？ ] <grid-auto-columns> − 将 grid-template-rows 设置为指定值（自动流或密集）。如果 auto-flow 关键字位于斜杠的右侧，则会将 grid-auto-flow 设置为列。如果另外指定了 dense 关键字，则自动放置算法将使用“dense”打包算法。如果省略 grid-auto-columns，则将其设置为 auto。
  • [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> − 将 grid-auto-columns 设置为指定值。如果 auto-flow 关键字位于斜杠的左侧，则将 grid-auto-flow 设置为行。如果另外指定了 dense 关键字，则自动放置算法将使用“dense”打包算法。如果省略 grid-auto-rows，则将其设置为 auto。

适用于

所有 HTML 元素。

DOM 语法


object.style.grid = "<grid-template>|<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>| [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>";

CSS grid - <grid-template>

以下示例演示了设置为 grid： 100px/ 200px 的网格，第一行高 100px，列宽 200px -


<html>
<head>
<style>
	 	.grid-box {
	 	 	 display: grid;
	 	 	 grid: 100px / 200px;	
	 	 	 gap: 10px;
	 	}
	 	.grid-box > div {
	 	 	 background-color: red;
	 	 	 border: 3px solid lightgreen;
	 	 	 padding: 10px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
	 	<div class="grid-box">
	 	 	 <div>1</div>
	 	 	 <div>2</div>
	 	 	 <div>3</div>
	 	 	 <div>4</div>
	 	</div>
</body>
</html>

CSS grid - minmax（） / repeat（）

以下示例演示了 grid： minmax（100px， min-content） / repeat（auto-fill， 50px）; 属性的使用。

  • minmax（100px， min-content） 用于行大小调整。在这里，minmax 函数定义了 100px 的最小大小和取决于内容的最大大小。
  • repeat（auto-fill， 50px） 用于列大小调整。repeat 函数对网格轨道重复该模式。它使用自动填充功能在可用区域内创建尽可能多的列，每列的固定大小为 50px。

<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid: minmax(100px, min-content) / repeat(auto-fill, 50px);
	 	 	 color: white;
	 	 	 text-align: center;
	 	 	 width: 300px;
	 	}
	 	.grid-container > div {
	 	 	 background-color: red;
	 	 	 border: 2px solid lightgreen;
	 	 	 margin: 5px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div>Grid item 1</div>
	 	 	 <div>Grid item 2</div>
	 	 	 <div>Grid item 3</div>
	 	 	 <div>Grid item 4</div>
	 	 	 <div>Grid item 5</div>
	 	 	 <div>Grid item 6</div>
	 	</div>
</body>
</html>

CSS grid - 自动流值

以下示例演示了 grid： auto-flow / 200px 属性的使用将行大小设置为 auto-flow，这会自动调整行高并将列宽设置为 200px −


<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid: auto-flow / 200px;
	 	 	 color: white;
	 	 	 width: 300px;
	 	 	 border: 2px solid lightgreen;
	 	}
	 	.grid-container > div {
	 	 	 background-color: red;
	 	 	 border: 2px solid lightgreen;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div>Grid item 1</div>
	 	 	 <div>Grid item 2</div>
	 	 	 <div>Grid item 3</div>
	 	 	 <div>Grid item 4</div>
	 	 	 <div>Grid item 5</div>
	 	 	 <div>Grid item 6</div>
	 	</div>
</body>
</html>

CSS grid - 自动流密集值

以下示例演示了 grid： 100px 200px / auto-flow dense 属性的用法。它指定了两行，高度分别为 100px 和 200px。

列设置为自动流动密集，这会自动将项目放置在网格中并密集，以适应尽可能多的网格元素，而不会有间隙。


<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid: 100px 200px / auto-flow dense;
	 	 	 color: white;
	 	 	 width: 300px;
	 	 	 border: 2px solid lightgreen;
	 	}
	 	.grid-container > div {
	 	 	 background-color: red;
	 	 	 border: 2px solid lightgreen;
	 	 	 padding: 10px;
	 	}
</style>
</head>
<body>
	 	<div class="grid-container">
	 	 	 <div>Grid item 1</div>
	 	 	 <div>Grid item 2</div>
	 	 	 <div>Grid item 3</div>
	 	 	 <div>Grid item 4</div>
	 	 	 <div>Grid item 5</div>
	 	 	 <div>Grid item 6</div>
	 	</div>
</body>
</html>

CSS grid - [ auto-flow & dense？ ] <grid-auto-rows>？/ <网格模板列>

以下示例演示了 grid： auto-flow 50px / repeat（3， 150px） 属性将行设置为 auto-flow 50px，这会自动将项目放置在行高设置为 50px 的网格中。

repeat（3， 150px） 指定应有三列，每列宽 150px。


<html>
<head>
<style>
	 	.grid-container {
	 	 	 display: grid;
	 	 	 grid: auto-flow 50px / repeat(3, 150px);
	 	 	 color: white;
	 	 	 width: 300px;
	 	 	 border: 2px solid lightgreen;
	 	}
	 	.grid-container > div {
	 	 	 background-color: red;
	 	 	 border: 2px solid lightgreen;
	 	 	 padding: 10px;
	 	}
</style>
</head>
	 	<div class="grid-container">
	 	 	 <div>Grid item 1</div>
	 	 	 <div>Grid item 2</div>
	 	 	 <div>Grid item 3</div>
	 	 	 <div>Grid item 4</div>
	 	 	 <div>Grid item 5</div>
	 	 	 <div>Grid item 6</div>
	 	</div>
</body>
</html>

CSS grid - 相关属性

以下是与网格相关的 CSS 属性列表：

属性 值
display 定义元素是网格容器还是内联网格容器。
gap 定义行和列之间的间距。
grid-area 定义网格项在网格布局中的位置和大小。
grid-column 控制网格项在网格容器中按列方向的位置。
grid-row 控制网格项在网格容器中沿行方向的位置。
grid-template 指定网格列、网格行和网格区域。
grid-auto-columns 确定自动生成的网格列轨道的大小或此类轨道的模式。
grid-auto-rows 确定自动生成的网格行、轨迹的大小或此类轨迹的模式。
grid-auto-flow 指定网格项在网格中的排列方式。
<< CSS - user-select （用户选择）属性 CSS - Grid（网格）布局 >>