效果展示:
CSS
<style type="text/css"> .mui-content{ background: #fff; } .container{ display: grid; /* grid-template-columns: 50px 50px 50px; //每列宽都是50px */ /* grid-template-rows: 50px 50px 50px; //每行高都是50px */ /* grid-template-columns: repeat(3,50px); //列宽重复3次,宽50px */ /* grid-template-columns: repeat(2,10px 20px 30px); //重复某种特殊的模式 10 20 30 重复两遍 */ /* grid-template-columns: repeat(auto-fill,80px); //auto-fill 自动填充 */ /* grid-template-columns: 1fr 2fr 3fr; //如果列的列宽是1fr 2fr 3fr,表示后者是前者的2倍 3倍 */ /* grid-template-columns: 150px 1fr 2fr ; //第一列固定150px,第二列是第三列的一半 */ /* grid-template-columns: 1fr 1fr minmax(200px,1fr) ; //minmax()不小于200px,不大于1fr */ /* grid-template-columns: 100px auto 100px; //auto 由浏览器自己的长度决定 */ /* grid-template-columns: [c1]100px [c2]auto [c3]100px; //[]中填写列宽或者行高的名称,允许同一根线有多个名字 */ /* grid-template-columns:30% 70%; //两栏式布局 */ /* grid-template-columns: repeat(12,1fr); //传统的12栅格 */ grid-template-columns: repeat(3,100px); grid-template-rows: repeat(3,100px); /* grid-column-gap: 20px; grid-row-gap: 20px; */ /* grid-gap: 20px 20px; // grid-column-gap和grid-row-gap的简写 */ /* grid-auto-flow: column; //容器子元素排序,默认row横向排列 */ /* grid-auto-flow: row dense; // row dense 表示先行后列,并尽可能紧密填满,不出现空行 */ /* grid-auto-flow: column dense; // colum dense 表示先列后行,并尽可能紧密填满,不出现空列 */ /* justify-items: center; //设置单元格水平位置(左中右) */ /* align-items: center; //设置单元格垂直位置(上中下) */ /* place-items: start center; //是align-items属性和justify-items属性的合并简写形式 */ /* justify-content: space-between; //整个内容区域在容器里面的水平位置(左中右) */ /* align-content: center; //整个内容区域在容器里面的垂直的位置(上中下) */ /* place-content: center center; //是align-content和justify-content的简写 */ /* grid-auto-rows: 50px; //grid-auto-columns属性和grid-auto-rows属性用来设置,浏览器自动创建的多余网格的列宽和行高 */ } .item{ text-align: center; /* line-height: 100px; */ border: solid 1px #e5e4e9; } .item-1 { background-color: #ef342a; /* grid-column-start: 1; //项目的左边框是第一根垂直网线格 */ /* grid-column-end: 3; //项目的右边框是第三根垂直网线格 */ /* grid-row-start: 2;//项目的上边框是第二根水平网线格 */ /* grid-row-end: 4; 项目的下边框是第四根水平网线格 */ } .item-2 { background-color: #f68f26; /* grid-column-start: 1; grid-column-end: 3; */ } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; } .item-9 { background-color: #91D3F7; } </style>
HTML
<span>foo</span> <div class="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="item item-4">4</div> <div class="item item-5">5</div> <div class="item item-6">6</div> <div class="item item-7">7</div> <div class="item item-8">8</div> <div class="item item-9">9</div> </div> <span>bar</span>