网格布局的简单应用（display: grid;）

夜深人静_

于 2020-03-01 20:17:02 发布

阅读量801

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/weixin_46236141/article/details/104596848

版权

本文介绍了如何使用CSS网格布局（display: grid;）创建一个简单的九宫格。通过将容器设置为网格并定义行和列，可以轻松地布局多个元素。文章通过实例展示了如何设置网格轨道大小，分配区域，以及如何通过调整子元素的grid-column和grid-row属性改变其位置。此外，还提到了添加间隙的方法和考虑父容器尺寸固定时的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在做布局的时候经常会发现有些地方的宽高排列都非常规则，而且有多行内容，这时使用网格（grid）布局就非常的方便快捷了。那么接下来我们做个简单的九宫格来看看该如何使用该布局：

实例

很明显九宫格就是九个小方块，那么我们可以用一个大盒子去套九个小盒子：

<div id="main">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <div class

最低0.47元/天解锁文章