grid布局基础

最新推荐文章于 2024-07-19 19:50:00 发布

m0_46085126

最新推荐文章于 2024-07-19 19:50:00 发布

阅读量70

点赞数

分类专栏： HTML/CSS 文章标签： css css3 html 前端

本文链接：https://blog.csdn.net/m0_46085126/article/details/130778143

版权

HTML/CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main {
            display: grid;
            /* 设置grid有几列，每列宽度 */
            grid-template-columns: 100px 100px 100px;
            /* repeat第1个参数是重复的值，第2个是所需要的宽度 */
            /* grid-template-columns: repeat(3, 100px); */
            /* 比例，平均几等分 */
            /* grid-template-columns: repeat(3, 1fr); */
            /* auto-fill自动填充 */
            /* grid-template-columns: repeat(auto-fill, 100px); */
            /* minmax最小和最大的范围 */
            /* grid-template-columns: 1fr minmax(100px, 2fr) 1fr; */
            /* auto由浏览器自己决定长度 */
            /* grid-template-columns: 100px auto 100px; */

            /* 设置grid第1-n行的高度 */
            grid-template-rows: 100px 100px 100px;

            /* 按列排序 */
            grid-auto-flow: column;

            /* 按行排序 */
            grid-auto-flow: row;

            /* 列间距 */
            column-gap: 5px;
            /* 行间距 */
            row-gap: 5px;





            /* width: 600px;
            height: 600px; */
            border: 3px solid aqua;
        }

        .item {
            font-size: 50px;
        }

        .item-1 {
            background-color: aquamarine;
        }

        .item-2 {
            background-color: rgb(63, 220, 100);
        }

        .item-3 {
            background-color: rgb(54, 119, 192);
        }

        .item-4 {
            background-color: rgb(72, 46, 158);
        }

        .item-5 {
            background-color: rgb(123, 44, 143);
        }

        .item-6 {
            background-color: rgb(201, 110, 145);
        }

        .item-7 {
            background-color: rgb(241, 63, 63)
        }

        .item-8 {
            background-color: rgb(229, 255, 127);
        }

        .item-9 {
            background-color: rgb(244, 161, 120);
        }

        .item-10 {
            background-color: rgb(80, 223, 95);
        }
    </style>
</head>

<body>
    <div class="main">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
    </div>
</body>

m0_46085126

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
grid布局基础

* repeat第1个参数是重复的值，第2个是所需要的宽度 *//* 设置grid有几列，每列宽度 *//* minmax最小和最大的范围 *//* auto由浏览器自己决定长度 *//* 设置grid第1-n行的高度 *//* auto-fill自动填充 *//* 比例，平均几等分 *//* 按列排序 *//* 按行排序 */
复制链接

扫一扫