我们使用display属性来定义一个网格容器，它的grid值决定了容器展现为块级还是内联形式。一旦启用网格容器，它的所有子元素都进入grid文档流，称为网格子项。
display: grid | inline-grid | subgrid
grid：定义一个块级的网格容器
inline-grid：定义一个内联的网格容器
subgrid：定义一个继承其父级网格容器的行和列的大小的网格容器，它是其父级网格容器的一个子项。
注意：column, float, clear和vertical-align对网格容器没有效果。
grid布局是一个二维的布局方法，纵横两个方向总是同时存在
grid-template-columns（列）grid-template-rows（行）
对网格进行横纵划分，形成一个二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。有时候，我们网格的划分是很规律的，如果需要添加多个模拟网格时，可以利用repeat()语法进行简化操作。
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
等价于
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns:1fr 1fr 1fr;
注意：自由空间是在固定子项确定后开始计算的
.container{
grid-template-columns: 1fr 50px 1fr 1fr;
}
在上面的代码中，自由空间是fr单位的总和但不包括50px。
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid网格布局1</title>
<style>
.box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
/* grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);} */
grid-template-rows: 100px auto 25%;
grid-template-columns: 100px 100px 200px;
}
.box div{background: red;border: 1px blue solid;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
grid-template-areas和 grid-template
grid-template-areas就是给我们的网格划分区域的，此时grid子项只要使用grid-area属性 指定其隶属于那个区域
grid-template是grid-template-rows、grid-template-columns、grid-template-areas属性的缩写
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
等价于
grid-template;
"a1 a1 a1" 1fr
"a2 a2 a3" 1fr
"a2 a2 a3" 1fr
/1fr 1fr 1fr;
grid-column-gap/grid-row-gap/grid-gap
指定网格线的大小，也可以说是网格子项之间的间距。
grid-gap是grid-column-gap和grid-row-gap的简称.
如果只有一个值，grid-row-gap的值将和grid-column-gap一样。
grid-column-gap:10px;
grid-row-gap:20px;
等价于
grid-gap:20px 10px;
注意：间隔仅仅作用在网格子项之间，不作用在容器边缘。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid网格布局2</title>
<style>
.box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
grid-column-gap:10px;
grid-row-gap:20px;
/* grid-gap:20px 10px; */}
.box div{background: red;border: 1px blue solid;}
.box div:nth-child(1){background: red;grid-area: a1;}
.box div:nth-child(2){background: yellow;grid-area: a2;}
.box div:nth-child(3){background: blue;grid-area: a3;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
justify-items/align-items
justify-items：让网格子项的内容和列轴对齐，这个值对容器里面的所有网格子项都有用。（指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐）
start：内容和网格区域的左边对齐
end：内容和网格区域的右边对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的宽度（默认值）
align-items：让网格子项的内容是和行轴对齐（指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐）
start：内容和网格区域的顶部对齐
end：内容和网格区域的底部对齐
center：内容和网格区域的中间对齐
stretch：填充整个网格区域的高度（默认值）
place-items可以让align-items（第一个值）和justify-items（第二个值）属性写在单个声明中。
本来状况
justify-items: start;
align-items: start;
justify-items: start;
align-items: start;
justify-content/align-content
justify-content（针对所有网格）水平分布
start:左对齐
end：右对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：两边对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：网格间隔相等，包括始末两端
刚开始
justify-content: start;
align-content垂直分布
start：顶部对齐
end：底部对齐
center：居中对齐
stretch：填充网格容器
space-around：在每个网格子项中间放置均等的空间，在始末两端只有一半大小
space-between：上下对齐，在每个网格子项中间放置均等的空间，在始末两端没有空间
space-evenly：在每个网格子项中间放置均等的空间，包括始末两端
align-content: start;
place-content可以让这两个写在一个css声明中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid网格布局1</title>
<style>
.box{width: 500px;height: 500px;border: 1px black dotted;display: grid;
grid-template-rows: repeat(3,auto);
grid-template-columns: repeat(3,auto);
/* justify-items: start;
align-items: start; */
justify-content: start;
align-content: start;
}
/* grid-template-rows: 100px auto 25%;
grid-template-columns: 100px 100px 200px; */
.box div{background: red;border: 1px blue solid;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
网格子项的属性
grid-column-start/grid-column-end/grid-row-start/grid-row-end/grid-column/grid-row
通过网格线来定义网格项的位置。
grid-column-start水平方向上占据的起始位置
grid-column-end水平方向上占据的结束位置（span属性）
grid-row-start垂直方向上占据的起始位置
grid-row-end垂直方向上占据的结束位置（span属性）
span ：子项将跨越指定数字的网格轨迹
span ：子项将跨越指定名字之前的网格线
grid-column是grid-column-start和grid-column-end的简称；grid-row是grid-row-start和grid-row-end的简称。
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 3;
grid-row-end: 4;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2;
等价于
grid-column: 2 / 3;
grid-row: 2 / span 2;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);}
.box div{background: red ;border: 1px black soild;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: span 2;
/* grid-column: 2 / 3;
grid-row: 2 / span 2; */
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
grid-area表示当前网格所占用的区域，名字和位置两种表示方法。第一个值是水平起始位置，第二值是垂直的起始位置，第三个值是水平结束位置，第二值是垂直的结束位置。
grid-area: 3/2/4/4;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3,1fr);
grid-template-columns: repeat(3,1fr);}
.box div{background: red ;border: 1px black soild;
grid-row: 2 / span 2; */
grid-area: 3/2/4/4;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
</body>
</html>
justify-self单个网格元素的水平对齐方式
start – 让内容在网格区域左对齐
end – 让内容在网格区域右对齐
center – 让内容在网格区域中间对齐
stretch – 填充着呢个网络区域的宽度（默认值）
align-self单个网格元素的垂直对齐方式
start – 让内容在网格区域上对齐
end – 让内容在网格区域下对齐
center – 让内容在网格区域中间对齐
stretch – 填充着呢个网络区域的高度（默认值）
place-self是复合写法
justify-self: start;align-self: end;
等价于
place-self: end start;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box3{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
grid-template-rows: repeat(3,auto);
grid-template-columns: repeat(3,auto);
}
#box3 div{background: red ;border: 1px black soild;}
#box3 div:nth-child(2){justify-self: start;align-self: end;}
</style>
</head>
<body>
<div id="box3">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
骰子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骰子</title>
<style>
.box{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px; display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;}
.box div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box div:nth-child(1){grid-area: 2/2/3/3;}
.box2{width: 100px;height: 100px; border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;}
.box2 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box2 div:nth-child(2){grid-area: 3/3/4/4;}
.box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";}
.box3 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box3 div:nth-child(2){grid-area: a5;}
.box3 div:nth-child(3){grid-area: a9;}
.box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";}
.box4 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box4 div:nth-child(2){grid-area: a3;}
.box4 div:nth-child(3){grid-area: a7;}
.box4 div:nth-child(4){grid-area: a9;}
.box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";}
.box5 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box5 div:nth-child(2){grid-area: a3;}
.box5 div:nth-child(3){grid-area: a5;}
.box5 div:nth-child(4){grid-area: a7;}
.box5 div:nth-child(5){grid-area: a9;}
.box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(3,1fr);
place-items: center center;
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9";}
.box6 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
.box6 div:nth-child(2){grid-area: a3;}
.box6 div:nth-child(3){grid-area: a4;}
.box6 div:nth-child(4){grid-area: a6;}
.box6 div:nth-child(5){grid-area: a7;}
.box6 div:nth-child(6){grid-area: a9;}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
简单面板布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width: 280px;height: 352px;margin: 20px auto;display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: repeat(4,1fr);
grid-template-areas:
"a1 a2 a2"
"a3 a2 a2"
"a4 a4 a5"
"a6 a7 a7";
grid-gap:6px 6px;}
.box div{background: red;}
.box div:nth-child(1){grid-area: a1;}
.box div:nth-child(2){grid-area: a2;}
.box div:nth-child(3){grid-area: a3;}
.box div:nth-child(4){grid-area: a4;}
.box div:nth-child(5){grid-area: a5;}
.box div:nth-child(6){grid-area: a6;}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
713
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
