web前端全系列 教程
1839个小节阅读:2242.9k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
网格布局(Grid)是最强大的 CSS 布局方案。
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了
上图这样的布局,就是 Grid 布局的拿手好戏
学习 Grid 布局之前,需要了解一些基本概念
采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)
xxxxxxxxxx
<div>
<div><p>1</p></div>
<div><p>2</p></div>
<div><p>3</p></div>
</div>
最外层的<div>
元素就是容器,内层的三个<div>
元素就是项目
容器里面的水平区域称为"行"(row),垂直区域称为"列"(column)
水平的深色区域就是"行",垂直的深色区域就是"列"
行和列的交叉区域,称为"单元格"(cell)。
正常情况下,n
行和m
列会产生n x m
个单元格。比如,3行3列会产生9个单元格
划分网格的线,称为"网格线"(grid line)。水平网格线划分出行,垂直网格线划分出列。
正常情况下,n
行有n + 1
根水平网格线,m
列有m + 1
根垂直网格线,比如三行就有四根水平网格线
一个 4 x 4 的网格,共有5根水平网格线和5根垂直网格线