Grid布局

最新推荐文章于 2025-01-18 01:16:24 发布

秃小陈

最新推荐文章于 2025-01-18 01:16:24 发布

阅读量439

点赞数

分类专栏：笔记 Grid css 文章标签： css Grid html

本文链接：https://blog.youkuaiyun.com/m0_47652477/article/details/118163101

版权

笔记同时被 3 个专栏收录

42 篇文章

订阅专栏

Grid

1 篇文章

订阅专栏

css

1 篇文章

订阅专栏

本文深入探讨CSS Grid布局，包括基本概念、容器属性（如grid-template-columns/rows, grid-gap, grid-template-areas）和项目属性（如grid-column/row, grid-area）。通过实例解析各项属性的用法，帮助开发者掌握这一强大的二维布局工具。" 115901100,1246606,ICONICS日志配置到数据库实战指南,"['数据库', '日志配置', '组态软件', '数据连接', '实时监控']

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

Grid布局

1.1 基本概念

容器和项目

在这里插入图片描述

现在我们来拓展一下

在这里插入图片描述

再来看看网格线

在这里插入图片描述

1.2 容器（container）属性

顾名思义，就是写在容器上的属性，有下列这些

在这里插入图片描述

grid-template-columns%grid-template-rows

最重要的两个属性，用于指定你想要一个容器里面有多少行多少列,并填写对应的属性值的个数

例如：grid-template-columns: 100px 100px 100px;

grid-template-rows: 100px 100px 100px 100px;

上面两段代码等价于

grid-template-columns: repeat(3,100px);

grid-template-rows:repeat(4,100px);

那么效果就会如下图

在这里插入图片描述

repeat()还可以这样用: repeat(auto-fill,xxx px):这个就代表自动填充,每个盒子的高度(宽度)是xxx px,直到填满这个盒子的行(列)为止
fr (fraction),为了方便表示比例关系,我们直接举例: grid-template-columns: repeat(4,1fr);这个写法等价于grid-template-columns: 1fr 1fr 1fr 1fr;
- 上面的例子表示item的宽度平均分为4等分
minmax(最小值,最大值): 这个也是写在grid-template-xx的属性里面的,当我们的页面是自适应的时候,我们就可以让某个item的宽度或高度的范围限定起来 . 例如: grid-template-columns: 1fr minmax(150px,1fr) 1fr 1fr;
- 那么中间这个盒子是可以自适应的,最小150px
auto, 浏览器自己来决定item的宽度或高度
网格线: 可以用方括号定义网格线名称,方便后续的引用, 网格线是帮助定位用的
- 例如: grid-template-columns: [C1] 1fr [C2] 1fr [C3] 1fr [C4] 1fr [C5] ;