本文介绍了如何使用CSS Grid布局实现响应式设计，包括创建网格、定义列和行、放置元素以及实现响应式布局的例子。通过设置grid-template-columns、grid-template-rows、grid-gap和grid-template-areas等属性，可以灵活地构建自定义网格，并在不同屏幕尺寸下展示不同的布局效果。
Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。下面本篇文章介绍一下如何使用CSS网格布局(grid)实现响应式设计。
常用Grid布局属性介绍
下面从一个简单Grid布局例子说起。
CSS Grid 布局由两个核心组成部分是 wrapper(父元素)和 items(子元素)。 wrapper 是实际的 grid(网格)，items 是 grid(网格) 内的内容。
下面是一个 wrapper 元素，内部包含6个 items ：
1
2
3
4
5
6
要把 wrapper 元素变成一个 grid(网格)，只要简单地把其 display 属性设置为 grid 即可：.wrapper {
display: grid;
}
Columns(列) 和 rows(行)
为了使其成为二维的网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
grid-template-columns的3个值表示三列，相应的数值表示列宽即都为100px。
grid-template-rows的2个值表示两行，相应的数值表示行高即都为50px
得到的结果如下：
最低0.47元/天 解锁文章
9327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
