CSS——grid知识点汇总

效果展示：

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>