grid布局之容器属性grid-auto-columns&grid-auto-rows

简介

这两个属性专门用于设置多出来的项目的拜访
比如，容器划分了九个空间，但是目前的项目有十个

<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-rows: repeat(3,1fr);
            grid-template-columns: repeat(3,1fr);
            gap: 20px 10px;
            /* 用来设置多出来的项目的宽和高 */
        }

    style>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
        <li>4li>
        <li>5li>
        <li>6li>
        <li>7li>
        <li>8li>
        <li>9li>
        
        <li>10li>
    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
47
48
49
50
51
52

在这里插入图片描述

grid-auto-rows用来设置高度
grid-auto-columns用来设置列的宽度

例子

grid-auto-rows

ul{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    gap: 20px 10px;
    /* 用来设置多出来的项目的宽和高 */
    grid-auto-rows:50px; /*设置多出来的行的高度*/
}
1
2
3
4
5
6
7
8

效果

在这里插入图片描述
我们可以看到多出来的哪一行的高度变小了

grid-auto-rows

ul{
    display: grid;
    grid-template-rows: repeat(3,1fr);
    grid-template-columns: repeat(3,1fr);
    gap: 20px 10px;
    /* 设置顺序，让列多出来 */
    grid-auto-flow: column;
    grid-auto-columns: 50px; /*设置多出来的列的宽度*/
}
1
2
3
4
5
6
7
8
9

在这里插入图片描述

我们先改变了盒子的排列顺序，让列多出来
然后我们用属性grid-auto-columns，设置了多出来的列的宽度

相关阅读:
深入浅出学习透析Nginx服务器的基本原理和配置指南「初级实践篇」
数据结构每日亿题(七)
Slim-neck by GSConv:自动驾驶车辆检测器架构的更好设计范式（文末附代码）
【Android知识笔记】FrameWork中的设计模式
AI助力安全监管：TSINGSEE视频智能分析系统烟火识别算法
vue项目使用history模式，打包部署到服务器根目录与二级目录的方法
props对象写法
《工程伦理与学术道德》之《工程中的风险、安全与责任》
《京东敏捷实践指南》读后感
Redis的优惠券秒杀问题（六）超卖问题、一人一单问题

原文地址：https://blog.csdn.net/youhebuke225/article/details/126668287