CSS Grid 网格布局

最新推荐文章于 2023-08-10 16:27:22 发布

yyrSun

最新推荐文章于 2023-08-10 16:27:22 发布

阅读量256

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/yyjourney/article/details/78717009

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS Grid 网格布局由两个核心组成部分是 wrapper(父元素) 和 items（子元素）。
wrapper是实际的grid（网格），items是grid（网格）内的元素。

下面是实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
        .box {
            display: grid;
            grid-template-columns: 100px 100px 100px;
            /*把子集的宽度都设置为100px*/
            grid-template-rows: 50px 50px;
            /*把子集的高度都设置为50px*/
            text-align: center;
            line-height: 50px;
        }

        /*grid-template-columns, 代表是列*/
        /*grid-template-rows，代表是行*/

    </style>
</head>
<body>
<div class="box">
    <div style="background-color: pink">
        这是第一个
    </div>
    <div style="background-color: green">
        这是第二个
    </div>
    <div style="background-color: navajowhite">
        这是第三个
    </div>
    <div style="background-color: pink">
        这是第四个
    </div>
    <div style="background-color: green">
        这是第五个
    </div>
    <div style="background-color: navajowhite">
        这是第六个
    </div>
</div>
</body>
</html>

yyrSun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Grid 网格布局

CSS Grid 网格布局由两个核心组成部分是 wrapper(父元素) 和 items（子元素）。 wrapper是实际的grid（网格），items是grid（网格）内的元素。下面是实现代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网格布局</title> <style
复制链接

扫一扫

专栏目录