grid布局 笔记

grid布局笔记

这次给大家带来的是grid布局，之前听说过但没接触过，一起来学一下吧，提升一下css认知。

1、开启方式

给父级盒子开启grid布局

    display: grid

2、gap 间隙

所有盒子的行列间隙为10px

    gap: 10px

行/列

    colomn-gap: 20px;
    row-gap: 15px

注意：如果所有间隙和单独设置列/行同时存在，那么根据排列顺序 “后来者居上”，也就是尽管多次重复赋值了，但最终取的值是最后设置的
例如下面这段，最终的盒子间隙都为40px

     colomn-gap: 20px;
     row-gap: 15px
     gap: 40px;

3、grid-row/column 设置表格行列的值

表格形式，填写表格放置的位置
column列是X横轴，row行是Y纵轴
注意：记得给外层父盒子添加 display:grid

    /*  列: x轴1-3 行: y轴1-2*/  
    .one{
        grid-column: 1 / 3;  
        grid-row: 1 / 2; 
        /* grid-row: 1;  还可以简写为从哪行开始 */
    }
    /*  列: 1-2  */
    .two{
        grid-column: 1 / 2; 
        grid-row: 2 / 2;
    }
    /*  列: 2-3  */
    .three{
        grid-column: 2 / 3; 
        grid-row: 2 / 2;
    }
     /*  列: 3-3  */
    .four{
        grid-column: 3 / 3; 
        grid-row: 3 / 2;
    }

上面代码配合这张图更加直观，一眼就懂
在这里插入图片描述

4、grid-auto-rows/columns 行列的默认宽高度

一般给父级用的，设置所有子盒子的行列的默认值，如果父/子盒子自身设置了grid-row/column，那么优先使用grid-row/column设置的值，而不是grid-auto-row/column

    grid-auto-rows: 10px
    grid-row: 20px

5、grid-template-columns 设置一行里多个列

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
auto-fill自动换行
minmax列在屏幕最小时和最大时的宽度书写顺序为倒序，先写小再写大 1fr代表屏幕最小时列占比一行 fr是faction 分数 x

这里可以写n个1fr，每个盒子是列的占比假设你要一行摆放3个盒子，那么就写三个1fr

    grid-template-columns: 1fr 1fr 1fr

6、grid-template-rows 设置多个行的高度

跟上面类似，也可以设置一行中各个列各自的高度
grid-template-rows: 1fr 100px

7、grid-template-areas 区域性分块

将页面的模块进行分块，每一组双引号代表一行，这一行你可以自行排列盒子。
注意点:

由于父盒子需要对应上子盒子的名称，子盒子需要设置好自身的名字，也就是每个被排列的盒子都有自己的名字，父盒子排列时就用这些名字
子盒子的名称是自定义的，建议取语义化一些
一行最多放两个盒子

局限性：
只适合一行左右两个盒子的布局，超过两个的建议用单独设置的，超过的用上面的第3点的内容。

示例：

/* 父盒子 */
   .container{
     grid-template-areas: 
        "header header"
        "aside content"
        "footer footer" 
   }

/* 子盒子 */
    header{
        grid-area: header
    }
    div{
        grid-area: aside
    }
    ...

8、附加一道常考的面试题

左边盒子固定100px,右边自适应

    .container {
      margin: 20px;
      display: grid;
      /* columns复数形式代表多个列，可以根据子div排列进行设置不同的宽  */
      grid-template-columns: 100px 1fr; 
      grid-auto-rows: 100px;
    }

    <div class="container">
      <div>猛啊兄弟</div>
      <div>这你也会</div>
    </div>

9、后话

如果看不懂可以点进这个链接看教程，我就是通过这个视频学到的，之前都很少接触到这些

想了解更多api建议查MDN文档哈
想看我练习grid布局时的demo到我的github这里克隆下来

标签