容器属性 display:grid 网格布局
前言：
看到一个大佬做了一个chrome tab页（itab.link/）的插件，被这个布局吸引了，拖动换位置后还可以填充，了解到display：grid这个布局，的确强大灵活，学习下
先来看一下容器的属性
/* 定义每一行的行高，个数代表几行 */
grid-template-rows: 50px 50px;
grid-template-rows: repeat(2 50px);
/* 定义每一列的宽，个数代表几列 */
grid-tempalate-columns:20px 20px 20px;
grid-tempalate-columns:repeat(3 20px);
/* repeat(个数,内容) */
grid-template-columns:repeat(2, 100px 20px 80px);
repeat与auto-fill一起使用。
如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。
grid-template-columns:repeat(auto-fill,100px) ;
/* fr 单位，可以用来设置倍数，可以与绝对长度的单位结合使用 */
grid-template-columns: 150px 1fr 2fr;把整体减去150px的区域平均分成fr和的份数
/* minmax(200px,2fr) 长度范围，表示长度就在这个范围之中 */
grid-template-columns:100px 1fr 2fr minmax(100px,1fr);
/* grid-row-gap属性设置行与行的间隔（行间距） */
/* grid-column-gap属性设置列与列的间隔（列间距）
如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值 */
grid-gap: <grid-row-gap> <grid-column-gap>;
/* grid-template-areas定义区域,用来合并单元格 如果某些区域不需要利用，则使用"点"（.）表示。见下面圣杯布局使用例子👇 */
grid-template-areas: 'a b c'
'd e f'
'g h .';
/* grid-auto-flow
设置容器的子元素顺序，默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
设为row dense，表示"先行后列"，并且尽可能紧密填满，尽量不出现空格
*/
grid-auto-flow: row | column | row dense |column dense;
/* justify-items属性设置单元格内容的水平位置（左中右） */
/* stretch 拉伸，占满单元格的整个宽度（默认值）*/
justify-items: start | end | center | stretch;
/* align-items属性设置单元格内容的垂直位置（上中下） */
justify-items: start | end | center | stretch;
/* justify-content 整个内容水平对齐方向 start | end | center | stretch space-around | space-between | space-evenly */
/* space-evenly 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔 */
justify-items:center
/* align-content 整个内容垂直对齐方向 start | end | center | stretch
space-around | space-between | space-evenly */
align-items:center
圣杯布局
<section class="grid">
<div class="title">title</div>
<div class="nav">nav</div>
<div class="main">main</div>
<div class="aside">aside</div>
<div class="footer">footer</div>
</section>
<style>
body {
margin: 0;
padding: 0;
}
.grid {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 80px 1fr 1fr 1fr 80px;
grid-template-rows: 80px 1fr 1fr 80px;
grid-template-areas:
"title title title title title"
"nav main main main aside"
"nav main main main aside"
"footer footer footer footer footer";
font-size: 30px;
text-align: center;
}
.title {
grid-area: title;
background-color: aquamarine;
}
.nav {
grid-area: nav;
background-color: rgb(22, 245, 171);
}
.main {
grid-area: main;
background-color: rgb(22, 24, 23);
}
.aside {
grid-area: aside;
background-color: rgb(9, 54, 39);
}
.footer {
grid-area: footer;
background-color: rgb(157, 177, 170);
}
</style>
再来看一下item的一些属性
/* 项目的位置是可以指定的，具体方法就是指定项目的四个边框，分别定位在哪根网格线 */
grid-column-start：左边框所在的垂直网格线
grid-column-end：右边框所在的垂直网格线
grid-row-start：上边框所在的水平网格线
grid-row-end：下边框所在的水平网格线
/* 还可以使用span关键字，表示"跨越"，即左右边框（上下边框）之间跨越多少个网格 */
grid-column-start: span 2;
grid-row-start: span 3;
/* grid-column属性是grid-column-start和grid-column-end的合并简写形式，
grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。 */
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
/* grid-area属性指定项目放在哪一个区域。先用grid-template-areas创建区域*/
/* grid-area属性还可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，直接指定项目的位置。 */
grid-area: nav;
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
/* justify-self属性设置单元格内容的水平位置（左中右），跟justify-items属性的用法完全一致，但只作用于单个项目。
align-self属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目。 */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
总结
参考csdn上的这篇文章，总结挺不错的，只是文章篇幅太长（传送👇 blog.csdn.net/m0_53161190…
容器的属性
-
定义网格的行与列 grid-templete-rows定义每一行的高度 grid-templete-columns定义每一列的宽度 取值：
-
固定的像素px 定义百分比 repeat进行重复 repeat(重复的次数,具体的值) auto-fill根据容器大小确定重复 fr关键字 平均分配 minmax(min,max) auto 自动 -
定义网格的间距gap
grid-row-gap定义行与行间距 简写为row-gap grid-column-gap定义列与列间距 简写为：column-gap 复合写法grid-gap：grid-row-gap grid-column-gap； 简写为：gap -
定义网格的区域 （合并单元格）
-
grid-template-areas定义区域 合并的单元格名字必须相同 不需要的则使用.代替 注意：配合grid-area只给子项目使用 -
定义网格的排列顺序
-
grid-auto-flow定义网格的排列顺序 row先行后列 column先列后行 注意：dense添加后可以减少空格出现 让其尽量紧密排列 -
定义网格内容的对齐方式（水平垂直）
-
justify-items定义网格内容中水平对齐方式 align-items（垂直方向） start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值） 复合写法 place-items:align-items justify-items; -
定义网格整体的位置
-
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly;
项目的属性：
- 设置项目起始和结束显示位置
-
grid-row-start grid-row-end grid-column-start grid-column-end 复合属性 grid-row:start/end; grid-column:start/end; 注意关键字:span - grid-area属性指定项目放在哪一个区域
-
需要先在容器里用grid-template-areas定义区域 - 定义项目自己在单元格的位置
-
justify-self align-self start：对齐单元格的起始边缘。 end：对齐单元格的结束边缘。 center：单元格内部居中。 stretch：拉伸，占满单元格的整个宽度（默认值）。 复合写法 place-self
个人练手示例
<body>
<div class="box">
<div class="child">1</div>
<div
class="child"
style="
grid-row-start: span 2;
grid-column-start: span 4;
background: bisque;
"
>
2
</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
<div
class="child"
style="
grid-row-start: span 2;
grid-column-start: span 2;
background: bisque;
"
>
6
</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>
<div class="child">10</div>
<div
class="child"
style="
grid-row-start: span 2;
grid-column-start: span 4;
background: bisque;
"
>
11
</div>
<div class="child">12</div>
<div class="child">13</div>
<div class="child">14</div>
<div class="child">15</div>
<div class="child">16</div>
<div class="child">17</div>
<div class="child">18</div>
<div class="child">19</div>
<div class="child">20</div>
<div class="child">21</div>
</div>
</body>
<style>
.box {
height: 400px;
display: grid;
grid-template-columns: repeat(8, 50px); /* 每行展示8个空 */
grid-template-rows: repeat(6, 50px); /* 在盒子内一共6行 */
/* grid-auto-flow:row column; */
grid-auto-flow: row dense; /* 可以紧凑的填左上空子 实现布局最重要的一点 */
justify-content: center; /* 盒子水平居中 */
align-content: center; /* 盒子垂直居中 */
gap: 10px;
}
.child {
background-color: aquamarine;
}
</style>
