• css之gird布局的容器属性

    简介

    在学习之前，我们需要明白几个基本的概念

    1. 容器
    2. 项目
    3. 行
    4. 列
    5. 间距
    6. 区域
    7. 内容

    在这里插入图片描述

    准备

    我们先准备这样介个盒子

    <body>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 3px solid rebeccapurple;
            font-weight: bold;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 40px
        }

        li:nth-child(even) {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        li:nth-child(odd) {
            width: 100px;
            height: 100px;
            background-color: #000000;
        }
    style>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
        <li>7li>
        <li>8li>
        <li>9li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    目前，他看起来是这样的
    在这里插入图片描述

    容器属性

    列

    我们通过grid-template-columns来指定列数，我们写上如下代码

    ul{
    display: grid;
    /* 相当于grid-template-columns:200px 200px 200px */
    grid-template-columns: repeat(3,200px);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    • 这里是将容器分成了三列，每列的宽度是200px
    • 只指定列，行的高度会被自动分配(父元素有高度)

    行

    使用grid-template-rows来设置每一行的高度，他的是可以是具体的值，也可以是百分比

    ul{
    display: grid;
    /* 相当于grid-template-rows:200px 200px 200px */
    grid-template-rows: repeat(3,200px);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    • 这里我们只设置了行的属性，且一行只能排一个盒子，所以其余的盒子会在父元素之外，按照文档流的方式进行排列

    行列的缩写

    行列属性，也就是grid-template-rows和grid-template-columns，我们可以直接缩写成grid-template

    <body>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 3px solid rebeccapurple;
            font-weight: bold;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 40px
        }

        li:nth-child(even) {
            background-color: red;
        }

        li:nth-child(odd) {
            background-color: #000000;
        }

        ul{
            display: grid;
            /* 第一个表示行 、 第二个表示列 */
            grid-template: repeat(3,200px) / repeat(2,300px);
        }
    style>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    辅助函数

    辅助函数适用于列，也适用于行，这里以列为代表进行说明

    repeat()

    • 他可以跟两个参数，第一个参数为重复的次数
    • 第二个参数为重复的值
    ul{
    /* 相当于grid-template-rows:200px 200px 200px */
    grid-template-rows: repeat(3,200px);
}

    • 1
    • 2
    • 3
    • 4
    auto-fill

    repeat()的第一个参数

    • 这个属性一般用于，父元素容器的宽度不固定，但是项目的宽度是固定的
    • 子元素会自动横向排列到父容器的最大宽度后，然后进行换行
    ul{
    /* 此时父元素没有宽高 */
    display: grid;
    grid-template-columns: repeat(auto-fill,100px);
}

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    minmax

    接收两个参数产生一个范围，第一个参数为最小值，第二个参数为最大值，表示长度就在这个范围内

    ul{
    display: grid;
    /* 分成三列，第一列和第二列的宽度都是200px，第三列的最小值为100px，最大值为200px */
    grid-template-columns: 200px 200px minmax(100px,200px); 
}

    • 1
    • 2
    • 3
    • 4
    • 5

    fr

    repeat()的第二个参数，也可以单独使用，是fraction的缩写，是分离的意思

    ul{
    display: grid;
    /* 表示将容器平均分成4列 */
    grid-template-columns: repeat(4,1fr); 
}

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    ul{
    display: grid;
    /* 按照1：2：1的比例分成三列 */
    grid-template-columns: 1fr 2fr 1fr; 
}

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述

    auto

    他表示列的宽度由浏览器自己决定

    ul{
    display: grid;
    grid-template-columns: 200px 100px auto; 
}

    • 1
    • 2
    • 3
    • 4

    注意当前所展示的结果是因为，把子元素全部都去掉了宽高

    在这里插入图片描述

    • 父元素的宽度是600，第一列为200，第二列为100，第三列因为是auto属性，所以他它自动增长沾满了剩余的空间

    项目之间的距离

    • grid-column-gap:行之间的距离
    • grid-row-gap:列之间的距离
    • grid-gap:前两个的缩写

    新版本中grid前缀已经去掉

    ul{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    gap: 20px 10px;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    在这里插入图片描述

    1. 使用的时候一般子元素不用设置好宽高，间距由gap决定；如果子元素设置了宽高，又设置了gap，那么可能会导致子元素溢出父元素
    2. gap缩写的第一个值表示行之间的距离，第二个表示列之间的距离

    在网格布局中自定义摆放元素

    这里会使用到grid-template-areas

    • 使用grid-template-areas的前提是，我们需要使用grid-area给子元素定义名称
    • 他一般适用于当分割成网格布局的时候，子元素比网格布局少，然后使用grid-template-areas来在容器中摆放子元素的位置
    <body>
    <style>
    ...

        li:nth-child(1){
            grid-area: header;
            background-color: red;
        }
        li:nth-child(2){
            grid-area: left-sidebar;
            background-color: green;
        }
        li:nth-child(3){
            grid-area: right-sidebar;
            background-color: green;
        }
        li:nth-child(4){
            grid-area: bottom;
            background-color: black;
        }

        ul{
            display: grid;
            grid-template-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            grid-template-areas: 
            "header header header"
            "left-sidebar . right-sidebar"
            "bottom bottom bottom"
            ;
        }
    style>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39

    在这里插入图片描述

    解释

    1. 我们通过grid-area对容器的子元素进行命名后，那么就是在容器中摆放盒子了
    2. 因为我们通过属性grid-template-rows和grid-template-columns分成了三行三列，所以在grid-template-areas，写成了一个3*3的矩阵
    3. 然后摆放位置，其中不摆放的用.表示

    盒子摆放顺序

    参考博客

    1. 一般盒子的摆放顺序是先行后列，就是先从左到右将第一行摆放完后，再摆放第二列
    2. 我们可以通过属性grid-auto-flow来控制盒子摆放的顺序
    grid-auto-flow: [ row | column ] || dense

    • 1
    1. 其中row 就是默认值，表示先行后列的排序
2. 其中column 表示先列后行的排序
3. dense表示多的格子空白填充

    • 1
    • 2
    • 3
    <body>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 3px solid rebeccapurple;
            font-weight: bold;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 40px
        }

        li:nth-child(even) {
            background-color: red;
        }

        li:nth-child(odd) {
            background-color: #000000;
        }

        ul{
            display: grid;
            grid-template-columns: repeat(3,200px);
            grid-template-rows: repeat(2,300px);
        }
    style>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42

    默认布局

    在这里插入图片描述

    当我们添加属性

    ul{
    display: grid;
    grid-template-columns: repeat(3,200px);
    grid-template-rows: repeat(2,300px);
    /* 按列排，如果没有列，那么他默认是一列 */
    grid-auto-flow: column;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    效果
    在这里插入图片描述

    • 我们会发现他会先对于列进行摆放，当列摆放完后，在移到下一列

    dense

    • 加上这个属性会提高空间的利用率，如下例子
    <body>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        ul {
            width: 600px;
            height: 600px;
            border: 3px solid rebeccapurple;
            font-weight: bold;
            color: white;
            text-align: center;
            line-height: 100px;
            font-size: 40px
        }

        li:nth-child(even) {
            background-color: red;
        }

        li:nth-child(odd) {
            background-color: #000000;
        }

        ul{
            display: grid;
            grid-template-columns: repeat(3,200px);
            grid-template-rows: repeat(2,300px);
            /* 按列排，如果没有列，那么他默认是一列 */
            grid-auto-flow: row;
        }
        li:first-child{
            grid-column-start: 2;
        }
    style>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
    ul>
body>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    效果
    在这里插入图片描述

    • 假设我们在ul加上如下属性
    ul{
    display: grid;
    grid-template-columns: repeat(3,200px);
    grid-template-rows: repeat(2,300px);
    grid-auto-flow: row dense;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    就会呈现出一下属性
    在这里插入图片描述

    • 当他进行排列的时候，如果加上了dense属性，他会先检测前面是否还有空，如果还有空的话就会在有空的地方摆放
  • 相关阅读:
    递归关系的渐进时间复杂度推导
    454. 四数相加 II
    Python:实现recursive quick sort递归快速排序算法(附完整源码)
    论文复现笔记
    Flowable 工作流 删除任务
    【java表达式引擎】三、轻量级表达式引擎Expr4j
    C语言--从键盘输入10个数字放在数组中，并输出
    有效的括号（栈的高频面试题）
    Abbexa丨Abbexa 脱落酸 (ABA) ELISA试剂盒方案
    docker swarm快速部署redis分布式集群
  • 原文地址：https://blog.csdn.net/youhebuke225/article/details/126290200