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

最新推荐文章于 2024-07-07 19:39:12 发布

youhebuke225

最新推荐文章于 2024-07-07 19:39:12 发布

阅读量630

点赞数 1

分类专栏： # CSS基础文章标签： css css3 html

本文链接：https://blog.csdn.net/youhebuke225/article/details/126668287

版权

CSS基础专栏收录该内容

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

    </style>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <!-- 没有定义 10 的高度，他的高度是由内容撑开的，三个盒子是均分的，多出来的10会占据一行
            剩下的空间会被均分
         -->
        <li>10</li>
    </ul>
</body>

在这里插入图片描述

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; /*设置多出来的行的高度*/
}

效果

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

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; /*设置多出来的列的宽度*/
}

在这里插入图片描述

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

youhebuke225

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
grid布局之容器属性grid-auto-columns&grid-auto-rows

margin;padding;}ul{width;height;border;;color;text-align;;}{;repeat(,);repeat(,);gap;/* 用来设置多出来的项目的宽和高 */}
复制链接

扫一扫

专栏目录