.grid { /* 块级元素 */ display: grid; }
容器属性
1、划分行和列
指定列宽 grid-template-columns
指定行高 grid-template-rows
允许的值： 100px 100px 100px; 33.33% 33.33% 33.33%; repeat(3, 33.33%); （重复的次数， 重复值） repeat(auto-fill, 100px); 自动填充 1fr 2fr; 比例关系 150px 1fr 2fr; 1fr 1fr minmax(100px, 1fr); 长度范围 100px auto 100px; 由浏览器自己决定长度 [c1] 100px [c2] 100px [c3] auto [c4]; 网格线的名称
2、行列间距
行间距 grid-row-gap (row-gap) 列间距 grid-column-gap (column-gap) grid-gap (gap): <grid-row-gap> <grid-column-gap>;
3、指定"区域"
grid-template-areas: 'a b c' 'd e f' 'g h i';
4、放置顺序
grid-auto-flow row 先行后列 (默认) column 先列后行
5、单元格对齐
水平位置 justify-items: start | end | center | stretch(default); 垂直位置 align-items: start | end | center | stretch(default); place-items: <align-items> <justify-items>;
6、内容对齐
水平位置justify-content: start | end | center | stretch | space-around | space-between | space-evenly; 垂直位置align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-content: <align-content> <justify-content>
7、多余网格的列宽和行高
grid-auto-columns grid-auto-rows 写法与grid-template-columns和grid-template-rows完全相同
8、合并简写
grid-template: <grid-template-columns> <grid-template-rows> <grid-template-areas> grid: <grid-template-rows> <grid-template-columns> <grid-template-areas> <grid-auto-rows> <grid-auto-columns> <grid-auto-flow>
易读易写的角度考虑，还是建议不要合并属性
项目属性
1、网格线定位
grid-column-start：左边框所在的垂直网格线 grid-column-end：右边框所在的垂直网格线 grid-row-start：上边框所在的水平网格线 grid-row-end属性：下边框所在的水平网格线 允许值： 指定为网格线的序号 1 指定为网格线的名字 header-start 跨越网格 span 2; grid-column: <grid-column-start> / <grid-column-end> grid-row: <grid-row-start> / <grid-row-end>
2、指定项目区域
grid-area 允许值 区域名： e 指定项目的位置：<row-start> / <column-start> / <row-end> / <column-end>;
3、单元格内容对齐
水平位置 justify-self（左中右），与justify-items一致 垂直位置 align-self（上中下），与align-items一致 place-self: <align-self> <justify-self>;
布局实例
<style> .grid { /* 块级元素 */ display: grid; /* 指定列宽 */ grid-template-columns: 1fr 1fr 1fr; /* 指定行高 */ grid-template-rows: repeat(3, 100px); /* 指定行列间距 */ row-gap: 10px; column-gap: 10px; /* 放置顺序 */ grid-auto-flow: row; /* 单元格对齐 */ justify-items: stretch; } .column { background-color: #EEEEEE; text-align: center; } </style> <div class="grid"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> <div class="column">4</div> <div class="column">5</div> <div class="column">6</div> <div class="column">7</div> <div class="column">8</div> <div class="column">9</div> </div>
效果
