CSS 网格布局模块提供了基于网格的布局系统,具有行和列,使设计网页变得更容易,而无需使用浮动和定位:
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Grid Layout</h1>
<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>
<div class="grid-container">
<div class="item1">Header</div>
<div class="item2">Menu</div>
<div class="item3">Main</div>
<div class="item4">Right</div>
<div class="item5">Footer</div>
</div>
</body>
</html>
网格布局必须有一个父元素,其 display 属性设置为 grid。
网格容器的直接子元素自动成为网格项。
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px;
font-size: 30px;
}
.item1 {
grid-row: 1;
grid-column: 1;
}
.item2 {
grid-row: 1;
grid-column: 2;
}
.item3 {
grid-row: 1;
grid-column: 3;
}
.item4 {
grid-row: 2;
grid-column: 1;
}
.item5 {
grid-row: 2;
grid-column: 2;
}
.item6 {
grid-row: 2;
grid-column: 3;
}
.item7 {
grid-row: 3;
grid-column: 1 / span 3;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item item1">1</div>
<div class="grid-item item2">2</div>
<div class="grid-item item3">3</div>
<div class="grid-item item4">4</div>
<div class="grid-item item5">5</div>
<div class="grid-item item6">6</div>
<div class="grid-item item7">7</div>
</div>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>
<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>
</body>
</html>
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>
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>Grid Elements</h1>
<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>
<p>Direct child element(s) of the grid container automatically becomes grid items.</p>
<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>
</body>
</html>
当 HTML 元素的 display
属性时,该元素将成为网格容器 被设定为 网格
或内联网格
。
.grid-container {
display: grid;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: grid</h1>
<p>Use display: grid; to make a block-level grid container:</p>
<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>
</body>
</html>
.grid-container {
display: inline-grid;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: inline-grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>display: inline-grid</h1>
<p>Use display: inline-grid; to make an inline grid container:</p>
<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>
</body>
</html>
网格容器的所有直接子级都会自动成为网格项。
网格项的垂直线称为列。
网格项的水平线称为行。
每列/行之间的空间称为间隙。
您可以使用以下属性之一调整间隙大小:
column-gap
row-gap
gap
column-gap
属性设置列之间的间隙:
.grid-container {
display: grid;
column-gap: 50px;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
column-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The column-gap Property</h1>
<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>
<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>
</body>
</html>
row-gap
属性设置行之间的间隙:
.grid-container {
display: grid;
row-gap: 50px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
row-gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The row-gap Property</h1>
<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>
<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>
</body>
</html>
gap
属性是 row-gap
和 column-gap
属性:
.grid-container {
display: grid;
gap: 50px 100px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px 100px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The gap Property</h1>
<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>
<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>
</body>
</html>
gap
属性也可用于设置行间距和 一个值的列间隙:
.grid-container {
display: grid;
gap: 50px;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
gap: 50px;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<h1>The gap Property:</h1>
<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>
<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>
</body>
</html>
列之间的线称为列线。列线。
行之间的线称为行线。
将网格项放入网格容器时请参考行号:
将网格项放置在列线 1 处,并让它在列线 3 上结束:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>
将一个网格项放置在第 1 行,并让它在第 3 行结束:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
自己尝试一下→
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
</style>
</head>
<body>
<h1>Grid Lines</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
<p>You can refer to line numbers when placing grid items.</p>
</body>
</html>
指定列之间的间隙
row-gap 和 column-gap 属性的简写属性
grid-template-rows 的简写属性, 网格模板列、网格模板区域、网格自动行、 grid-auto-columns 和 grid-auto-flow 属性
指定网格项的名称,或者此属性是 grid-row-start、grid-column-start、grid-row 的简写属性-end 和 grid-column-end 属性
指定默认列大小
指定如何将自动放置的项目插入网格中
指定默认行大小
grid-column-start 和 grid-column-end 属性的简写属性
指定网格项的结束位置
指定列之间间隙的大小
指定网格项的起始位置
grid-row-gap 和 grid-column-gap 属性的简写属性
grid-row-start 和 grid-row-end 属性的简写属性
指定网格项的结束位置
指定行之间间隙的大小
指定网格项的起始位置
grid-template-rows、grid-template-columns 的简写属性 和网格区域属性
指定如何使用命名网格项显示列和行
指定列的大小以及网格布局中的列数
指定网格布局中行的大小
指定网格行之间的间隙