歡迎回到 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)即可獲?。?/p>

總共 28 關(guān)

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

掃描二維碼

下載編程獅App

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

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

返回頂部
登录
注册