当前位置: 首页 > Web前端 > HTML

网格布局

时间:2023-04-03 00:54:26 HTML

网格布局?Grid(网格)布局使我们能够比以往更灵活地构建和控制自定义网格;能够通过简单的属性将网页分成行和列,完成我们需要的网格布局。CSSGrid布局由两个核心组件wrapper(父元素)和items(子元素)组成。wrapper是实际的网格(grid),items是网格(grid)的内容。下面是一个父元素,里面有6个子元素:1

2
3
4
5>6为了让它成为二维网格容器,我们需要定义列和行:创建3行(列)和2列(行)。框{显示:网格;网格模板列:50px50px50px;网格模板行:50px50px;}grid-template-columns创建列;创建几个列并在后面写几个值;grid-template-rows创建一行;创建几行并在后面写一些值;效果图是:为了确保正确理解这些值与网格外观之间的关系,请看这个例子。CSS代码.box{显示:网格;网格模板列:300??px150px50px;网格模板行:150px50px;}效果是:是不是非常好理解好用对不对?如果觉得对您有帮助请点个关注,如有不足之处还请多多指教!