CSS Grid Layout为CSS引入了一个二维网格系统。网格可用于布局主要页面区域或小型用户界面元素。
网格是一组交叉的水平和垂直线 - 一组定义列，其他行。元素可以放在网格上，以行或者列为标准。
grid布局的优点：
1：固定和灵活的轨道尺寸
2：可以使用行号，名称或通过定位网格区域将项目放置在网格上的精确位置。网格还包含一种算法，用于控制未在网格上显示位置的项目的放置。
3：在需要时添加其他行和列
4：网格包含对齐功能，以便我们可以控制项目放置到网格区域后的对齐方式，以及整个网格的对齐方式。
5：可以将多个项目放入网格单元格或区域中，它们可以彼此部分重叠。然后可以用z-index属性控制该分层。
父元素必须设置display为grid或inline-grid
父元素grid属性：
- grid-template-columns（row）：设置网格的列(行)，每一个值就代表创建那行（列）的列（行）宽
- fr：代表容器的可用空间，等份的分成对应份数。
- minmax()：设置创建网格的最大值或最小值，此函数接受两个参数，第一个参数定义最小值，第二个值为最大值，auto值允许尺寸拉伸，
- repeat()：创建重复的轨道，此函数接受两个参数，第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸。
- grid-column（row）-gap：设置列与列(行与行)之间的间距
grid子元素的属性：
- grid-column-start/grid-column-end：设置列线的开始和结束位置
- grid-row：是grid-row-start和grid-row-end的简写，当设置为一个值时，代表列的开始位置，
- grid-column：当设置为一个值时，代表行的开始位置，
- span：span后面紧随数字，表示合并多少个列或行
- grid-area：四个值，第一个值对应grid-row-start，第二个值对应grid-column-start，第三个值对应grid-row-end，第四个值对应grid-column-end 分别代表行列开始，行列结束。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.wrapper div{
background-color: aquamarine;
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
</style>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
原文地址：https://www.cnblogs.com/NineKit/p/9775804.html
时间： 2024-10-09 06:13:24