歡迎回到 CSS3 Grid 网格布局实战

開始闖關(guān)

CSS3 Grid 网格布局实战

网格布局(Grid)是最强大的 CSS 布局方案。

它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。

Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex 布局强大。


共28關(guān)

CSS3 网格布局

關(guān)卡 1
创建 CSS 网格
關(guān)卡 2
使用 grid-template-columns 添加多列
關(guān)卡 3
使用 grid-template-rows 添加多行
關(guān)卡 4
使用 CSS 网格单位来更改列和行的大小
關(guān)卡 5
使用 grid-column-gap 创建多列之间的间距
關(guān)卡 6
使用 grid-row-gap 创建多行之间的间距
關(guān)卡 7
使用 grid-gap 为网格添加间距
關(guān)卡 8
使用 grid-column 来控制空间大小
關(guān)卡 9
使用 grid-row 来控制空间大小
關(guān)卡 10
使用 justify-self 属性
關(guān)卡 11
使用 align-self 属性
關(guān)卡 12
使用 justify-items 属性
關(guān)卡 13
使用 align-items 属性
關(guān)卡 14
使用 grid-template-areas 属性
關(guān)卡 15
使用 grid-area 属性
關(guān)卡 16
使用 grid-area 属性创建区域模板
關(guān)卡 17
使用 repeat 函数
關(guān)卡 18
使用 minmax 函数
關(guān)卡 19
使用 auto-fill 关键字
關(guān)卡 20
使用 auto-fit 关键字
關(guān)卡 21
使用媒体查询创建响应式布局
關(guān)卡 22
在网格中创建网格
關(guān)卡 23
空间居中布局
關(guān)卡 24
空间左上角布局
關(guān)卡 25
空间右下角布局
關(guān)卡 26
两栏式布局
關(guān)卡 27
三明治布局
關(guān)卡 28
圣杯布局
實戰(zhàn)證書

通過本門實戰(zhàn)闖關(guān)即可獲??!

總共 28 關(guān)

已完成 0%
权威性
W3Cschool官方平台认证,无可替代的权威性和纪念性。
学习证明
随时查看学习记录,是认可自己学习结果的有效证明。
自我激励
每一张证书都记录着自己的成长,铭刻每一分付出和成就。
領(lǐng)取證書
周排行榜
排行TOP100
App下載
App下載

掃描二維碼

下載編程獅App

關(guān)注有禮
微信公眾號

掃碼關(guān)注 領(lǐng)資料包

返回頂部
登录
注册