grid布局笔记

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
            padding: 0;margin: 0;
        }
        .Grid{
            background: #7a8a9a;
            height: 100%;
            /* 表示使用grid布局 */
            display: grid;
            /* 表示两列，分别是100px和200px  */
            /* grid-template-columns:100px 200px;  */

            /* 表示三列，分别是第一列100px和最后一列是200px，中间一列自适应  */
            /* grid-template-columns:100px auto 200px;  */

            /* 表示三列自适应，第三列宽度是前两列的两倍 */
            grid-template-columns:1fr 1fr 2fr;  

            /* repeat（n,val），简写，表示重复n次，每个的值为val,可以是百分比也可以是像素 */
            grid-template-rows: repeat(3, 33.33%);

            /* auto-fill属性，表示自动填充100px的内容，直到容器最大宽度再换行 */
            /* grid-template-columns:repeat(auto-fill,100px) */

            /*内容中的间距设置，等同于下面的div设置*/
            /* grid-row-gap:5px;
            grid-column-gap:5px; */
            /* 间距简写，第一个shift行，第二个是列 */
            grid-gap:5px 5px;
            
            /*默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，这个顺序由grid-auto-flow属性决定，默认值是row，即"先行后列"。也可以将它设成column，变成"先列后行"。 */
            /* grid-auto-flow: column; */

            /*justify-items属性设置单元格内容的水平位置（左中右），align-items属性设置单元格内容的垂直位置（上中下）。 flex box */

            /* grid-auto-columns属性和grid-auto-rows属性用来设置，浏览器自动创建的多余网格的列宽和行高。
            它们的写法与grid-template-columns和grid-template-rows完全相同。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。 */
            
            /* grid-column-start属性：左边框所在的垂直网格线 */
            /* grid-column-end属性：右边框所在的垂直网格线 */
            /* grid-row-start属性：上边框所在的水平网格线 */
            /* grid-row-end属性：下边框所在的水平网格线 */
            /* grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式 */
                /* .item-1 {
                grid-column: 1 / 3;
                grid-row: 1 / 2;
                 }
                /* 等同于 */
               /* .item-1 {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 2;
                } */

        }
      /*等同于上面的algin-items:center和justify-items:center 和grid-gap:5px*/
        .Grid>div{
            background: #ff6666;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div class="Grid">
        <div >1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
</body>
</html>
grid布局笔记

推荐阅读更多精彩内容
