容器属性 display:grid 网格布局
容器属性 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>
作者：Yte
链接：https://juejin.cn/post/7026308327948681246