HTML代码:
1 <div id="box"> 2 <div class="lbox box1" style="background: #F2211A;">1</div> 3 <div class="lbox box2" style="background: #909399;">2</div> 4 <div class="lbox box3" style="background: #F56C6C;">3</div> 5 <div class="lbox box4" style="background: #E6A23C;">4</div> 6 <div class="lbox box5" style="background: #67C23A;">5</div> 7 <div class="lbox box6" style="background: #303133;">6</div> 8 <div class="lbox box7" style="background: #DCDFE6;">7</div> 9 <div class="lbox box8" style="background: #606266;">8</div> 10 <div class="lbox box9" style="background: #C0C4CC;">9</div> 11 <!--<div class="lbox" style="background: #D78D3D;">10</div>--> 12 </div>
CSS代码:(父元素容器)
1 #box{ 2 /*width: 550px;*/ 3 display: grid; 4 text-align: center; 5 /* grid-template-columns每一列的列宽 */ 6 /* grid-template-columns:100px 100px 100px; 等价于*/ 7 grid-template-columns: repeat(3,100px); 8 9 10 /* grid-template-rows每一行的行高 */ 11 /* grid-template-rows:100px 100px 100px 100px; 等价于*/ 12 grid-template-rows: repeat(3,100px); 13 14 15 /* auto-fill有时,单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用auto-fill关键字表示自动填充。*/ 16 /* grid-template-columns: repeat(auto-fill, 100px); */ 17 /* grid-template-rows: repeat(auto-fill, 100px); */ 18 19 20 /* fr表示比例关系,网格布局提供了fr关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr和2fr,就表示后者是前者的两倍。*/ 21 /* grid-template-columns: 1fr 1fr; */ 22 /* grid-template-columns: 150px 1fr 2fr;*/ 23 /* grid-template-columns: repeat(auto-fill, 1fr);*/ 24 25 26 /* minmax()函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。 */ 27 /* grid-template-columns: 1fr 1fr minmax(100px, 1fr);列宽不小于100px,不大于1fr*/ 28 29 30 /* auto关键字表示由浏览器自己决定长度。*/ 31 /*grid-template-columns: 100px auto 100px;*/ 32 33 34 /* 网格线的名称 35 * grid-template-columns属性和grid-template-rows属性里面,还可以使用方括号,指定每一根网格线的名字,方便以后的引用*/ 36 /*grid-template-columns: [c1] 100px [c2] 100px [c3] auto [fifth-line row-5]; 网格布局允许同一根线有多个名字,比如[fifth-line row-5]*/ 37 /*grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];*/ 38 39 40 /* grid-row-gap,属性设置行与行的间隔(行间距) 41 grid-column-gap,列与列的间隔(列间距) 42 grid-gap, grid-gap: <grid-row-gap> <grid-column-gap>; 43 */ 44 /* grid-row-gap: 20px; 45 grid-column-gap: 20px; 46 grid-gap: 20px 20px; =>等价 grid-gap: 20px; 47 */ 48 49 50 /* grid-template-areas网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。*/ 51 /* grid-template-columns: 100px 100px 100px; 52 grid-template-rows: 100px 100px 100px; 53 */ 54 55 /* 划分出9个单元格,将其定名为a到i的九个区域,分别对应这九个单元格 56 grid-template-areas: 'a b c' 57 'd e f' 58 'g h i'; 59 */ 60 /* 将9个单元格分成a、b、c三个区域 61 grid-template-areas: 'a a a' 62 'b b b' 63 'c c c'; 64 */ 65 /* 中间一列为点,表示没有用到该单元格,或者该单元格不属于任何区域 66 grid-template-areas: 'a . c' 67 'd . f' 68 'g . i'; 69 */ 70 /* 示例 71 grid-template-areas: "header header header" 72 "main main sidebar" 73 "footer footer footer"; 74 */ 75 76 77 /* grid-auto-flow 放置顺序默认从行后列,从上而下 */ 78 /* grid-auto-flow: row; 默认 79 grid-auto-flow: row dense; 80 grid-auto-flow: column; 81 */ 82 83 84 /* 85 * justify-items单元格内容的水平位置(左中右): start | end | center | stretch(拉伸,占满单元格的整个宽度(默认值), 86 align-items属性设置单元格内容的垂直位置(上中下): 同上, 87 place-items: <align-items> <justify-items>; 可简写 88 */ 89 /* justify-items: stretch; 90 align-items: stretch; 91 place-items: center; 92 */ 93 94 95 /* justify-content 整个内容区域在容器里面的水平位置: start | end | center | stretch | space-around | space-between | space-evenly, 96 align-content 整个内容区域的垂直位置(上中下): 同上, 97 place-content: <justify-content> <align-content> 98 */ 99 /* justify-content: space-evenly ; 100 place-content:space-between space-evenly; 101 */ 102 103 104 /* grid-auto-columns和grid-auto-rows设置浏览器自动创建的多余网格的列宽和行高 */ 105 /* 106 grid-auto-rows: 50px; 107 grid-auto-columns: 50px; 108 */ 109 110 111 /* 112 * grid-template 属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式, 113 grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式 114 */ 115 116 } 117 /*.box1{ 118 grid-row-start: 4; 119 grid-column-start: 2; 120 } 121 .box2{ 122 grid-row-start: 5; 123 grid-column-start: 3; 124 }*/ 125 /*.box3{ 126 grid-row-start: 1; 127 grid-row-end: 3; 128 }*/