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，设置了多出来的列的宽度

相关阅读:
Java版本企业工程行业管理系统源码
vim复制代码包含注释时格式会乱掉的解决办法
【论文阅读】Decision Transformer: Reinforcement Learning via Sequence Modeling
超详细！linux系统nlg-eval安装指南
Python画爱心——一颗会跳动的爱心~
黑豹程序员-架构师学习路线图-百科：MVC的演变终点SpringMVC
Python基于php+MySQL的英语学习交流平台
【LeetCode】一文吃透字典树（附例题）
港科夜闻｜香港科大副校长汪扬教授代表第一届联盟联席理事长单位在京港大学联盟2022年理事会作工作总结报告...
Win11系统怎么安装到虚拟机的方法分享

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