css 网格布局

飞马攻城师

已于 2023-01-03 10:34:52 修改

阅读量819

点赞数 1

分类专栏： css 文章标签： css 前端 html

于 2022-12-19 16:05:33 首次发布

本文链接：https://blog.csdn.net/change_any_time/article/details/128359207

版权

简介： 网格是由一系列水平及垂直的线构成的一种布局模式。一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

一、display 属性

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

例：display:grid

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>CSS Grid - line-based placement starting point</title>
    <style>
        body {
     
            width: 90%;
            max-width: 900px;
            margin: 2em auto;
            font: 0.9em/1.2 Arial, Helvetica, sans-serif;
        }

        .container {
     
            display: grid;
            min-width: 200px;
            grid-template-columns: 1fr 1fr;
            background: bisque;
        }
        .container > div{
     
            height: 100px;
            border: 3px solid blueviolet;
            text-align: center;
            line-height: 100px;
            color: blue;
            font-size: 15px;
            font-weight: bold;
        }

    </style>
</head>
<body>
<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>
</body>
</html>

结果：
在这里插入图片描述
例：display:inline-grid

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content

最低0.47元/天解锁文章

飞马攻城师

关注

1
点赞
踩
8

收藏

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

网格是由一系列水平及垂直的线构成的一种布局模式。一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。
复制链接

扫一扫

专栏目录