前端网格布局display: grid；

叶不休

于 2024-08-25 20:34:02 发布

阅读量123

点赞数 3

分类专栏：前端文章标签：前端 css3 css vue.js html5 chrome edge

本文链接：https://blog.csdn.net/weixin_58694594/article/details/141534109

版权

前端专栏收录该内容

64 篇文章 1 订阅

订阅专栏

display: grid; 块级网格（常用）

display: inline-grid; 行内块级网格（一般不用）

HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

span标签是一个行内元素本来不能设置宽高，加上网格元素后就可以设置宽高，变成一个块元素

<!DOCTYPE html>
<html lang="en">
<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>
        .box{
            width: 200px;
            height: 200px;
            background: red;
            display: grid;
            /* 块级网格 */
            /* display: inline-grid; */
            /* 行内块级网格 */
        }
    </style>
</head>
<body>
    <div></div>
    <span>111111111</span>
    <span class="box">2222222222</span>
    <span>333333333</span>

</body>
</html>