君山 发表于 2021-4-12 09:48:10

CSS Grid 网格布局教程(1概述)

一、概述

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

它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。



上图这样的布局,就是 Grid 布局的拿手好戏。

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

Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。

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


墨裔 发表于 2021-7-25 12:40:24

下一篇:
CSS Grid 网格布局教程(2基本概念)
http://www.zgxsh.com/forum.php?mod=viewthread&tid=70526
页: [1]
查看完整版本: CSS Grid 网格布局教程(1概述)