网格是由一系列水平及垂直的线构成的一种布局模式。根据网格,我们能够将设计元素进行排列,帮助我们设计一系列具有固定位置以及宽度的元素的页面,使我们的网站页面更加统一。
一个网格通常具有许多的列(column) 与 行(row),以及行与行、列与列之间的间隙,这个间隙一般被称为沟槽(gutter)。
Grid 布局由以下几个基本概念组成:
div
元素。div
元素。网格容器属性
网格容器具有以下属性用于控制网格布局:
display
: 设置网格容器的显示模式。网格容器必须设置为 display: grid
或 display: inline-grid
才能使用网格布局。grid-template-columns
: 设置网格容器的列数和列宽(使用fr
、px
、em
等单位)。grid-template-rows
: 设置网格容器的行数和行高(使用fr
、px
、em
等单位)。grid-template
: 同时设置 grid-template-columns
和 grid-template-rows
。grid-auto-columns
: 设置网格容器的列宽。grid-auto-rows
: 设置网格容器的行高。网格项属性
网格项具有以下属性用于控制网格项在网格中的布局:
grid-column
: 设置网格项所在的列。grid-row
: 设置网格项所在的行。grid-column-start
: 设置网格项在列中的起始位置。grid-column-end
: 设置网格项在列中的结束位置。grid-row-start
: 设置网格项在行中的起始位置。grid-row-end
: 设置网格项在行中的结束位置。grid-area
: 设置网格项所在的区域。grid-gap
: 设置网格线之间的间距。定义固定和自适应的列宽、行宽
示例:
.grid-example{
display: grid;
grid-template-columns: 100px 200px auto;
/* 第一列100px,第二列200px,剩余空间分配给自适应列 */
grid-template-rows: 100px 200px auto;
/* 第一行100px,第二行200px,剩余空间分配给自适应行 */
}
.item{
margin: 10px;
background-color: rgb(100, 150, 200);
}
<div class="grid-example">
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
</div>
效果:
使用百分比定义列宽、行宽
示例:
.grid-example{
display: grid;
grid-template-columns: 30% 2fr 1fr;
/* 第一列占30%,第二列占剩余空间的两份,第三列占剩余空间的一份 */
grid-template-rows: 30% 2fr 1fr;
/* 第一行占30%,第二行占剩余空间的两份,第三行占剩余空间的一份 */
}
.item{
margin: 10px;
background-color: rgb(100, 150, 200);
}
<div class="grid-example">
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
</div>
效果:
等分(平均分配)列宽、行宽
示例:
.grid-example{
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 三等分列,每列占据剩余空间的一份 */
grid-template-rows: repeat(3, 1fr);
/* 三等分行,每行占据剩余空间的一份 */
}
.item{
margin: 10px;
background-color: rgb(100, 150, 200);
}
<div class="grid-example">
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
</div>
效果:
使用 minmax
定义列、行的最小和最大宽度、高度
示例:
.grid-example{
display: grid;
grid-template-columns: minmax(100px, 1fr) minmax(200px, 2fr);
/* 第一列最小宽度100px,占剩余空间的一份;第二列最小宽度200px,占剩余空间的两份 */
grid-template-rows: minmax(100px, 1fr) minmax(200px, 2fr);
/* 第一行最小高度100px,占剩余空间的一份;第二行最小高度200px,占剩余空间的两份 */
}
.item{
margin: 10px;
background-color: rgb(100, 150, 200);
}
<div class="grid-example">
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
</div>
效果:
网格间隙由 grid-row-gap
和 grid-column-gap
两个属性来控制。另外,CSS Grid Level 2 中引入了 gap
属性,可以同时控制 grid-row-gap
和 grid-column-gap
示例:
.grid-example{
display: grid;
grid-template-columns: 30% 30% 30%;
grid-template-rows: 200px 200px;
grid-row-gap: 50px; /* 行间隙为50px */
grid-column-gap: 30px; /* 列间隙为30px */
/* gap: 50px 30px; 行间隙为50px,列间隙为30px */
}
.item{
margin: 10px;
background-color: rgb(100, 150, 200);
}
<div class="grid-example">
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
<div class="item">Grid演示</div>
</div>
效果:
网格定位通常指的是使用 grid-column
、grid-row
、以及 grid-area
这些属性来定位网格布局中的项目。这些属性用于指定项目在网格中所占的列和行,或者直接指定项目所在的区域。
grid-column
是用于设置一个网格项横跨的列的属性。它是 grid-column-start
和 grid-column-end
的简写。通过 grid-column
,你可以更方便地定义网格项在水平方向上的位置和跨足的列数。grid-row
是用于设置一个网格项横跨的行的属性。它是 grid-row-start
和 grid-row-end
的简写。通过 grid-row
,你可以更方便地定义网格项在垂直方向上的位置和跨足的行数。grid-area
属性是一个用于同时设置 grid-row-start
、grid-column-start
、grid-row-end
以及 grid-column-end
属性的简写属性。通过 grid-area
,你可以更直观地定义一个网格项在网格布局中的位置和大小。示例:
.example {
display: grid;
grid-template-columns: repeat(3, 1fr);
/* 定义3列,每列占1份空间 */
grid-template-rows: repeat(2, 150px);
/* 定义2行,每行高度为150px */
gap: 10px;
padding: 20px;
}
.item {
background-color: #f2f2f2;
padding: 20px;
border: 1px solid #ddd;
text-align: center;
}
/* 使用 grid-column 和 grid-row 定位 */
.item1 {
grid-column: 1 / 3; /* 从第1列到第3列(1+2列) */
grid-row: 1 / 2; /* 从第1行到第2行(1行) */
}
/* 使用 grid-area 定位 */
.item2 {
grid-area: 2 / 2 / 3 / 4; /* 从第2行第2列到第3行第4列(2行)(2+3列) */
}
<div class="example">
<div class="item item1">Item 1</div>
<div class="item item2">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
</div>
效果:
示例:
body {
margin: 0;
padding: 0;
}
.container {
display: grid;
grid-template-columns: 1fr 2fr;
/* 定义两列,第一列占一份,第二列占两份 */
grid-template-rows: auto;
/* 定义行高度,第一行和第三行高度由内容决定,第二行占剩余空间 */
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
/* 定义区域布局,每个区域由一个字符串表示,空格分隔单元格,换行表示新的行 */
min-height: 100vh;
/* 设置最小高度,确保内容高度小于视口时,仍然能看到 footer */
}
.header {
grid-area: header;
/* 将 .header 放置到名为 "header" 的区域 */
background-color: #333;
color: #fff;
padding: 10px;
}
.sidebar {
grid-area: sidebar;
/* 将 .sidebar 放置到名为 "sidebar" 的区域 */
background-color: #f2f2f2;
padding: 10px;
}
.main {
grid-area: main;
/* 将 .main 放置到名为 "main" 的区域 */
padding: 10px;
}
.footer {
grid-area: footer;
/* 将 .footer 放置到名为 "footer" 的区域 */
background-color: #333;
color: #fff;
padding: 10px;
}
<div class="container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">
<h1>Main Content</h1>
<p>This is the main content area.</p>
</div>
<div class="footer">Footer</div>
</div>
效果: