从零开始的Grid布局掌握
xsobi 2024-11-23 10:46 1 浏览
前言
在上一篇文章中,我们了解了Flex布局系统的强大功能和灵活性,其能够帮我们轻松地控制和对齐页面中的元素
然而,在实际的网页设计中,我们经常会遇到更加复杂的布局需求,例如创建多列、多行的网格结构,为了解决这些需求,Grid布局应运而生
Grid布局是一种二维布局系统,它不仅能够像Flex一样处理单轴上的布局,还能同时处理行和列,从而实现更加复杂和精确的布局控制,无论是简单的页面排版,还是复杂的网页设计,Grid布局都能提供强大的支持
Grid布局
Grid布局,也称网格布局,不同于Flex针对轴线的一维布局,Grid是一个二维的布局,其将项目划分在行和列中,容器就像一个网格一样,项目就是一个个单元格,其能实现实现更加精细和复杂的设计
Grid布局是由W3C在2011年首次提出的,于2014年,发布了关于首个工作草案
到2016年,Grid布局规范进入候选推荐阶段,最终在2017年,正式成为W3C推荐标准,并在主流浏览器中得到了广泛支持
其兼容性如下(主流浏览器均已支持):
基本概念
任何元素均可定义为Grid容器,使用Grid布局,只需设置元素的display属性为grid或inline-grid即可,如下:
定义了Grid布局的元素,称为容器(container),其直接子元素会自动按网格排列,称为项目(item)
注意,设Grid后,容器内项目的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效
行和列
容器内水平区域称为行,垂直区域称为列
行与列交叉的区域称为单元格,项目就按顺序存放在一个个单元格内
网格线
划分单元格的线称为网格线,水平的网格线划分行,垂直的网格线划分列
区域
由一个或多个项目组成的矩形区域称为Grid区域(grid areas)
容器属性
下列属性主要使用于容器上
grid-template-rows|columns
该属性主要用于定义网格的行和列(几行,各行宽;几列,各列宽等)
其是grid-template-rows和grid-template-columns属性的简写形式,形式如下:
grid-template-rows属性定义每一行的行宽,grid-template-columns属性定义每一列的列宽
如下,定义一个3×3的Grid容器,且每个项目的宽高均为100px
有时,我们并不能确定某行(列)的宽度,或行(列)数量较多时,按这种形式写比较复杂,所以,CSS提供了一些函数或关键字,可方便我们的设置
- repeat()
该函数用于简化重复值,形式如下:
效果与上侧实现一致
repeat()接收两个参数,第一个参数表示重复的次数,第二个参数表示重复的内容
- fr
该关键字主要用于表示比例关系,其为fraction(片段)的缩写
上侧container-1表示,将容器均分为三列,container-2表示,将容器按1:2:3的比例分为三列
- minmax()
该函数用于表示一个长度范围,其接收两个参数:一个最小值(min)和一个最大值(max),表示长度在[min, max]内,数值是任何有效的CSS长度值、百分比或auto
上侧代码表示将容器分为三列,左右两列固定宽度,中间的列最小宽度不小于72px,最大宽度不大于1fr
- auto
该关键字表示由浏览器自己决定长度
上侧代码中,第一列会占据容器剩余宽度,除非列内单元格内容设置了min-width,且这个值大于最大宽度
- auto-fill
该关键字用于实现自动填充,有时候,项目(单元格)的大小是确定的,但容器的大小不确定,因此我们无法确定每一行(列)可容纳的项目数,此时,我们希望每一行(列)可以尽可能多地容纳项目,即可用auto-fill
上侧的代码,我们对列设置了auto-fill,此时容器会按每列100px的宽度,自动填充列,直到不可容下更多列为止
与auto-fill类似的,还有一个auto-fit关键字
auto-fill与auto-fit的区别:
auto-fill会在容器中尽可能多地填充列或行,不管单元格是否有内容
其特点为:
自动填充列或行,尽量多地创建网格轨道
即使某些网格单元没有内容,也会分配空间
auto-fit当容器宽度增加时,会调整现有列的大小,而不是增加新的空列
其特点为:
自动适应列或行,现有列会根据容器大小调整
空列会被折叠,不占用额外的空间
一般情况下,两种基本无差别,只有当容器足够宽,足以在一行容纳所有单元格,并且单元格宽度不固定,才会有差异
举个栗子
当容器宽度足够富余时,fill容器会尽可能多地容纳列,每列100px,而fit容器会优先分配空间给已有列,每列1fr
- 网格线的名称
在Grid布局内,允许指定每一根网格线的名字,方便以后的引用
主要方式为使用方括号,在grid-template-columns属性和grid-template-rows属性里面定义,如:
上侧代码中,定义了一个3×3的网格,所以有4根列线与4根行线,上侧的[]内的值即为每根线的名称,如:c1
同一根线可以有多个名称,只需定义在同一个方括号内,用空格隔开,如:[c1 column1]
gap
该属性用于定义行与行之间、列与列之间的间距,是row-gap和column-gap的简写,形式如下:
接收一个或两个值,当只有一个时,表示行列间距均为该值
row-gap属性用于设置行与行之间的间距
column-gap属性用于设置列与列之间的间距
上侧代码大致效果如下(橙色部分即为间距):
过去的gap名称为grid-gap,该名称首次于2017年在CSS Grid Layout Module Level 1中被引入,但在2018年提出的CSS Box Alignment Module Level 3被重命名为gap,同时适用于Grid和Flex
grid-template-areas
该属性用于定义网格区域,对网格区域进行命名,后续可使用命名的网格区域进行布局,如:
上侧代码定义了一个3×3的网格,共有9个单元格,分别命名为a-i,共有9个区域
一个区域,可以由一个或多个单元格组成,当有多个单元格时,则用相同名称即可,如:
相同名称的单元格会合并为一个区域
如某些单元格不想命名,无需利用处理,用.点占位即可,如:
上侧的代码命名了4个区域,中间的点表示该单元格不属于任何区域
使用场景
简单直观地定义一个页面的布局
当你使用 grid-template-areas 定义网格区域时,Grid会自动生成与这些区域名称相关的命名网格线
命名网格线的格式如下:
area-name-start:区域的起始线
area-name-end:区域的结束线
例如,如果定义了一个名为 header 的区域,会自动生成以下网格线:
header-start
header-end
grid-auto-flow
该属性用于定义自动放置的项目的布局顺序,其决定了当容器中的项目没有明确指定位置时,浏览器如何自动放置它们,其可能值为:
- row:(默认值)项目按照行的顺序放置
- column:项目按照列的顺序放置
- row dense:按行顺序放置项目,并尽可能紧凑地填充空白区域
- column dense:按列顺序放置项目,并尽可能紧凑地填充空白区域
row的放置顺序是先行后列,即先放满第一行,再放第二行,效果如下:
column的放置顺序是先列后行,即先放满第一列,再放第二列,效果如下:
dense用于与row或column搭配使用,使容器更紧凑地排列项目
如下,为无dense情况下的排列情况,会存在一些空白没有利用:
当搭配dense后,空白会被尽可能地利用,情况如下:
*-items
justify-items属性设置单元格内项目的水平对齐效果(左中右)
align-items属性设置单元格内项目的垂直对齐效果(上中下)
两个属性均有如下取值:
- stretch:(默认值)网格项在每个单元格中拉伸以填满单元格(如果可能)
- start:网格项在每个单元格的起始位置对齐(左对齐)
- end:网格项在每个单元格的结束位置对齐(右对齐)
- center:网格项在每个单元格的中央对齐
语法如下:
place-items属性是align-items属性和justify-items属性的合并简写形式,形式如下:
接收两个值,用空格隔开,第二个值可省略,如省略,则表示与第一个值相同
*-content
justify-content属性用于控制整个内容区域在容器内的水平对齐(左中右)
align-content属性用于控制整个内容区域在容器内的垂直对齐(上中下)
两个属性取值均相同,如下:
- start:内容在容器的起始位置对齐
- end:内容在容器的结束位置对齐
- center:内容在容器的中央对齐
- stretch:内容在容器中拉伸以填满可用空间
- space-between:内容行(列)之间平均分配空间,第一行(列)与容器的起始位置对齐,最后一行(列)与容器的结束位置对齐
- space-around:内容行(列)之间的空间平均分配,每一行(列)周围的间距相等
- space-evenly:内容行(列)之间以及内容与容器边缘之间的空间平均分配
place-content属性是align-content属性和justify-content属性的合并简写形式,语法如下:
如果省略第二个值,则会假定第二个值与第一个值相同
grid-auto-*
grid-auto-columns和grid-auto-rows用于定义在Grid布局中隐式创建的列和行的大小
其语法如下:
<track-size> 可以是任何有效的 CSS 尺寸值,如 px、%、fr、auto 等
举个栗子
比如,我们创建了一个3×3的网格容器,但我们的项目不止9个(比如有11个),或者有些项目指定位置超出3×3的范围(比如设置在(4, 2)位置),此时,浏览器会自动生成多余的网格,用于放置项目
在上侧代码中,任何隐式创建的行(即超过显式定义的三行的行)将被设置为 50px 高
grid-template
该属性是grid-template-rows、grid-template-columns和grid-template-areas的合并简写形式
举个栗子
- 第一行的高度为 100px,第二行为 200px,第三行为 100px
- 第一列的宽度为 1fr,第二列为 2fr,第三列为 1fr
- 定义了三个区域:header、sidebar 和 content
grid
grid 是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow六个属性的合并简写形式
基本语法
简写形式可以简化书写,但同时也降低了代码可读性,不建议使用
项目属性
主要作用域项目上的属性
grid-column|row
grid-column是一个简写属性,用于定义项目在网格中的水平位置,其结合了以下两个属性:
- grid-column-start:定义项目的水平初始位置
- grid-column-end:定义项目的水平结束位置
基本语法
<grid-line>可以是行号、命名的网格线、span关键字加行数,或者auto
<grid-area>是通过grid-template-areas定义的网格区域名
grid-row也是一个简写属性,用于定义项目在网格中的垂直位置,其结合了以下两个属性:
- grid-row-start:定义项目的垂直初始位置
- grid-row-end:定义项目的垂直结束位置
使用与grid-column一致
span关键字,后接空格跟一个数字,表示跨越(占据)多少行(列)
grid-area
该属性用于指定项目放置在哪一区域
基本语法
<grid-area-name>为grid-template-areas定义的区域名称
其还有另一种语法:
可用作grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式
*-self
justify-self属性用于设置项目在单元格内的水平对齐方式,跟justify-items属性的用法类似,但只作用于单个项目
align-self属性用于设置网格项目在单元格内的垂直对齐方式,跟align-items属性的用法类似,但只作用于单个项目
两者可能取值均相同,如下:
- stretch:(默认值)项目在单元格内拉伸以填满单元格
- start:项目在单元格的起始边对齐
- end:项目在单元格的结束边对齐
- center:项目在单元格的中心对齐
place-self是一个简写属性,用于同时设置justify-self和align-self的值,形式如下:
如果省略第二个值,则第二个值与第一个值相等
特点
二维布局系统:支持同时定义行和列,适合复杂布局
显式与隐式网格:可以明确定义网格,同时自动创建额外的网格以容纳项目
强大的对齐与定位控制:通过属性如justify-items、align-items、justify-content和align-content,可以精确控制项目在网格中的位置和对齐方式
网格间距和分区:支持定义网格之间的间距,并能够划分为命名的网格区域,便于布局管理和维护
响应式设计支持:可以轻松地调整网格的大小和布局,以适应不同的屏幕尺寸和设备
配合 Flexbox 使用:与 Flex 结合使用,可以实现更复杂的布局需求,灵活而强大
使用场景
复杂的布局需求:适合需要精确控制多个项目在网格中位置和大小的复杂布局,如新闻网站的多栏布局或者仪表板的网格化布局
网格化设计:对于需要将页面划分为多个命名区域并对其进行管理的设计,如大型网页或应用程序的板块化设计
响应式设计:能够根据不同的屏幕尺寸和设备自动调整布局,使得设计在移动设备和桌面上都能够优雅地呈现
比如,哔哩哔哩推荐的视频列表就是用grid实现的,Grid是一个非常强大的布局工具,特别适合于需要更高级和复杂布局需求的现代网页设计和开发
- 上一篇:鸿蒙开发(一百五十六):Grid 基本使用
- 下一篇:学会了grid布局
相关推荐
- js向对象中添加元素(对象,数组) js对象里面添加元素
-
一、添加一个元素对象名["属性名"]=值(值:可以是一个值,可以是一个对象,也可以是一个数组)这样添加进去的元素,就是一个值或对象或数组...
- JS小技巧,如何去重对象数组?(一)
-
大家好,关于数组对象去重的业务场景,想必大家都遇到过类似的需求吧,这对这样的需求你是怎么做的呢。下面我就先和大家分享下如果是基于对象的1个属性是怎么去重实现的。方法一:使用.filter()和....
- 「C/C++」之数组、vector对象和array对象的比较
-
数组学习过C语言的,对数组应该都不会陌生,于是这里就不再对数组进行展开介绍。模板类vector模板类vector类似于string,也是一种动态数组。能够在运行阶段设置vector对象的长度,可以在末...
- 如何用sessionStorage保存对象和数组
-
背景:在工作中,我将[{},{}]对象数组形式,存储到sessionStorage,然后ta变成了我看不懂的形式,然后我想取之用之,发现不可能了~记录这次深刻的教训。$clickCouponIndex...
- JavaScript Array 对象 javascript的array对象
-
Array对象Array对象用于在变量中存储多个值:varcars=["Saab","Volvo","BMW"];第一个数组元素的索引值为0,第二个索引值为1,以此类推。更多有...
- JavaScript中的数组Array(对象) js array数组
-
1:数组Array:-数组也是一个对象-数组也是用来存储数据的-和object不同,数组中可以存储一组有序的数据,-数组中存储的数据我们称其为元素(element)-数组中的每一个元素都有一...
- 数组和对象方法&数组去重 数组去重的5种方法前端
-
列举一下JavaScript数组和对象有哪些原生方法?数组:arr.concat(arr1,arr2,arrn);--合并两个或多个数组。此方法不会修改原有数组,而是返回一个新数组...
- C++ 类如何定义对象数组?初始化数组?linux C++第43讲
-
对象数组学过C语言的读者对数组的概念应该很熟悉了。数组的元素可以是int类型的变量,例如int...
- ElasticSearch第六篇:复合数据类型-数组,对象
-
在ElasticSearch中,使用JSON结构来存储数据,一个Key/Value对是JSON的一个字段,而Value可以是基础数据类型,也可以是数组,文档(也叫对象),或文档数组,因此,每个JSON...
- 第58条:区分数组对象和类数组对象
-
示例设想有两个不同类的API。第一个是位向量:有序的位集合varbits=newBitVector;bits.enable(4);bits.enable([1,3,8,17]);b...
- 八皇后问题解法(Common Lisp实现)
-
如何才能在一张国际象棋的棋盘上摆上八个皇后而不致使她们互相威胁呢?这个著名的问题可以方便地通过一种树搜索方法来解决。首先,我们需要写一个函数来判断棋盘上的两个皇后是否互相威协。在国际象棋中,皇后可以沿...
- visual lisp修改颜色的模板函数 怎么更改visual studio的配色
-
(defunBF-yansemokuai(tuyuanyanse/ss)...
- 用中望CAD加载LISP程序技巧 中望cad2015怎么加载燕秀
-
1、首先请加载lisp程序,加载方法如下:在菜单栏选择工具——加载应用程序——添加,选择lisp程序然后加载,然后选择添加到启动组。2、然后是添加自定义栏以及图标,方法如下(以...
- 图的深度优先搜索和广度优先搜索(Common Lisp实现)
-
为了便于描述,本文中的图指的是下图所示的无向图。搜索指:搜索从S到F的一条路径。若存在,则以表的形式返回路径;若不存在,则返回nil。...
- 两个有助于理解Common Lisp宏的例子
-
在Lisp中,函数和数据具有相同的形式。这是Lisp语言的一个重大特色。一个Lisp函数可以分析另一个Lisp函数;甚至可以和另一个Lisp函数组成一个整体,并加以利用。Lisp的宏,是实现上述特色的...
- 一周热门
- 最近发表
- 标签列表
-
- grid 设置 (58)
- 移位运算 (48)
- not specified (45)
- patch补丁 (31)
- strcat (25)
- 导航栏 (58)
- context xml (46)
- scroll (43)
- element style (30)
- dedecms模版 (53)
- vs打不开 (29)
- nmap (30)
- webgl开发 (24)
- parse (24)
- c 视频教程下载 (33)
- android 开发环境 (24)
- paddleocr (28)
- listview排序 (33)
- firebug 使用 (31)
- transactionmanager (30)
- characterencodingfilter (33)
- getmonth (34)
- commandtimeout (30)
- hibernate教程 (31)
- label换行 (33)