grid 布局

通过设置CSS属性 display: grid; 可以定义一个 CSS 网格。接着可以使用 grid-template-rows 和 grid-template-columns 属性定义网格的列属性(columns)和行属性(rows)。

使用这些属性定义的网格被称为显式网格 (explicit grid)

一些直白的概念

网格容器：由若干个矩形网格单元构成
网格项目：网格容器的子元素，必须放在网格单元中
网格单元：有“单元格”和“网格区域”两种表现形式；由一个或多个单元格组成
网格轨道：由多个网格单元组成，根据排列方向有“行轨”和“列轨”
轨道间距：容器中轨道之间的间距，有“行轨间距”和“列轨间距”

简而言之使用grid容器的三大步
第一：申明容器
第二：设置行轨和列轨
第三：设置轨道间距

<body>
    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
    </div>
</body>

    <style>
        .container {
            border: 1px solid #000;
            padding:0.5em;
            /* flex中子元素默认为inline元素，grid中子元素默认block */
            display: grid;
            /* 1. 设置轨道的列宽 */
            /* 设置一个3列2行的布局空间 */
            grid-template-columns:10em 10em 10em;
            /* 设置的轨道行高 */
            grid-template-rows: 5em 5em;
            /* 设置轨道的间距 */
            /* gap:水平方向  垂直方向 */
            gap:0.5em 1em;
            /* 如果两个值一样，可以简写，只写一个 */
            gap:0.5em;
        }
        /* 网格项目：网格容器中的“子元素”，与flex 一样 */
        .container > .item {
            /* 默认项目生成一列n行的容器（n就是项目的数量） */
            background-color: skyblue;
            border: 1px solid #000;
            padding: 0.5em;
        }
    </style>

两个重要的函数 repeat() minmax()

repeat() 指重复：第一个参数，重复的次数，第二个参数重复的内容可以是多个值

    <style>
        .container {
            border: 1px solid #000;
            padding:0.5em;
            display: grid;
            /* grid-template-columns: repeat(3,10em);  */
            grid-template-columns: repeat(3,10em 2em); 
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container>.item {
            background-color: skyblue;
            border: 1px solid #000;
        }      
    </style>

mimmax() 设置最小最大值

    <style>
        .container {
            border: 1px solid #000;
            padding:0.5em;
            display: grid;
            /* 中间列最小宽度20em，最大是左右的2倍 */
            grid-template-columns: 1fr minmax(20em,2fr) 1fr; 
            grid-template-rows: 5em 5em;
            gap: 0.5em;
        }
        .container>.item {
            background-color: skyblue;
            border: 1px solid #000;
        }      
    </style>

网格单元的排列方式

行优先

列优先

总结：3个属性的应用

排列方式：grid-auto-flow
隐式轨道的行高：grid-auto-rows
隐式轨道的列宽：grid-auto-columns

    <div class="container">
        <span class="item">item1</span>
        <span class="item">item2</span>
        <span class="item">item3</span>
        <span class="item">item4</span>
        <span class="item">item5</span>
        <span class="item">item6</span>
        <span class="item">item7</span>
        <span class="item">item8</span>
        <span class="item">item9</span>
    </div>

        .container {
            border: 1px solid #000;
            padding: 1em;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: 5em 5em;
            /* 此时声明的网格单元数量已经不够存入所有的网格项目了 */
            /* 多出的三个项目会自动放入自动生成的网格空间中了 */
            /* 这时，原来声明的网格单元叫：显示轨道 */
            /* 新项目显示的轨道称为：隐式轨道 */
            /* 自动生成的隐式轨道的高度时自动的  */
            /* 默认项目在容器中按 先行后列的顺序排列 也叫“行优先” */
            /* grid-auto-flow: row; */
            /* 可以通过 grid-auto-rows:属性设置 */
            /* 行优先时要设置行高 */
            grid-auto-rows: 5em;
            /* 列优先 */
            /* grid-auto-flow: column; */
            /* 列优先时要设置隐式轨道的列宽 */
            /* grid-auto-columns: 1fr; */
            /* 实际的应用中通常多用行优先 */
            gap: 0.5em;
        }
        .container>.item {
            background-color: skyblue;
            border: 1px solid #000;
        }

自定义项目在容器的显示位置

项目默认按照源码的书写顺序显示
编号从左上角开始（行号，列号）并递增（方向）。
每条线叫基线或者网格线
反方向标注也可以。依次递减

grid-area:设置任何一个项目所在的网格单元的区域
grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号

        /* 以第五个项目举例 */
        .container > .item:nth-of-type(5){
            background-color: wheat;
            /* grid-area:1 / 1 / 2 / 2; */
            /* 默认项目是跨越一行一列 */
            /* 可简写 */
            /* grid-area:1 / 1； */
            /* 但是，如果要跨越1行以上或者1列以上就不能省 */
            /* 跨多个单元格  */
            /* grid-area:1 / 1 / 3 / 4; */
            /* 通常只关心跨几行或者几列，并不关心结束的编号 */
            grid-area:1 / 1 / span 2 /span 3;
        }
        /* 简化语法 */
        .container > .item:first-of-type{
            background-color: red;
            /* grid-area:3 / 1 / span 1 / span 3; */
            /* 因为3 / 1 是当前位置，所以可以省略 */
            grid-area:span 1 / span 3;
            /* 默认跨一行一列 可是使用auto站位（感觉效果不是我想要的）*/
            /* grid-area: auto / shanp 3; */
            /* grid-area:2 / 2 / 4; */
        }

总结
grid-area: 参数数量不同，意义不同

值中只有span
1.1 单值：跨的行数
1.2 双值：跨的行与列数，如果只想设置列数，就必须设置行数
值中有span和编号
2.1 双值：没有span，默认跨1行1列，grid-area:2 / 3;
2.2 三值：省略了列结束编号或者跨的数量，此时前面的值可使用auto
2.3 四值：完美语法。

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

HTML他是啥

2020-12-09 16:09:43