【前端夯实基础】-grid布局

27天前发布

grid布局

网格布局，顾名思义，方方正正的格子都用它布局

常见属性

网格容器属性：grid，grid-template-columns，grid-auto-rows，gap…

网格子元素属性：grid-row，grid-column，grid-area

属性	解释	人话
grid	更改容器的流布局为网格	容器切换到网格布局模式
grid-template-columns	网格中列的总数量	竖着一共排几列
grid-template-rows	网格中行的总数量	横着一共排几行
grid-auto-rows	预设网格每行的高度	容器的每行多高【未设置总行数时生效】
grid-auto-columns	预设网格每列的宽度	容器的每列多宽【未设置总列数时生效】
grid-template-areas	预设网格每一个子元素位置	手动一个一个排网格项【必须是矩形】
grid-area	网格元素按网格行线设置大小时使用的名字	给网格每个子元素起个名字【配合grid-template-areas用的】
grid-row	网格元素按网格行线设置大小	指定定网格元素具体占几行【类似表格纵向合并】
grid-column	网格元素按网格列线设置大小	指定定网格元素具体占几列【类似表格横向合并】

布局方案

使用grid布局的三个常见场景，掌握以下三个即可掌握grid布局【重要‼️‼️】

方正无缺、大小相同：

直接设置grid-template-columns【见：九宫格方案】
方正无缺、大小不同：

类似表格合并，设置grid-row、grid-column【见：网格线方案】
不正有缺、大小不同：

排列无规律，且有缺角。设置grid-template-areas【见：网格区域方案】

常见用法

一、九宫格

    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
        <div class="box box4">4</div>
        <div class="box box5">5</div>
        <div class="box box6">6</div>
        <div class="box box4">7</div>
        <div class="box box5">8</div>
        <div class="box box6">9</div>
    </div>


    .box{
        outline: 1px solid #000;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        grid-auto-rows: 100px;
    }

二、三栏布局

网格线方案

    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

    .box{
        outline: 1px solid #000;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(10, 50px);
        gap: 20px;
    }
    .box1{
        grid-column: 1 / -1;
    }
    .box2{
        /* 不设置总行数无法使用-1 */
        grid-row: 2 / -1; 
    }
    .box3{
        grid-column: 2 / -1;
        grid-row: 2 / -1;
    }

网格区域方案

    <div class="container">
        <div class="box box1">1</div>
        <div class="box box2">2</div>
        <div class="box box3">3</div>
    </div>

    .box{
        outline: 1px solid #000;
    }
    .container{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 150px);
        gap: 20px;
        /* 三行两列 */
        grid-template-areas: 
            'a a a'
            'b c c'
            'b c c'
        ;
    }
    .box1{
        grid-area: a;
    }
    .box2{
        grid-area: b;
    }
    .box3{
        grid-area: c;
    }

详情参考：CSS布局网格

来源链接：https://www.cnblogs.com/yuyunhao/p/19027116

评分

欢迎为Ta评分