grid
网格布局,flex是一维的,grid是二维的。
和flex一样,grid的概念也有三个,一个是整体的容器,一个是格子,一个是格子中存放的元素(也就是grid子元素);
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PSARlw6i-1692416147621)(./images/grid.png)]
概念
容器和项目
在元素上声明 display:grid 或 display:inline-grid 来创建一个网格容器。这个元素的所有直系子元素将成为网格项目。
网格轨道:
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。容器内部的水平区域称为行,垂直区域称为列。
网格单元
一个网格单元是在一个网格元素中最小的单位, 从概念上来讲其实它和表格的一个单元格很像。
网格线
划分网格的线,称为"网格线"。应该注意的是,当我们定义网格时,我们定义的是网格轨道,而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。
m 列有 m + 1 根垂直的网格线,n 行有 n + 1 跟水平网格线。
一般而言,是从左到右,从上到下,1,2,3 进行编号排序。当然也可以从右到左,从下到上,按照 -1,-2,-3…顺序进行编号排序
使用
- display: grid
- display: inline-grid
理解参考flex;
当一个父元素使用grid显示,它内部就是grid子元素。
分配item空间大小对于子元素的意义
指定grid的大小,指定的大小是整个元素的所有区域(包括margin);
行列指定
隐式和显示网格
显式网格包含了你在 grid-template-columns 和 grid-template-rows 属性中定义的行和列。如果你在网格定义之外又放了一些东西,或者因为内容的数量而需要的更多网格轨道的时候,网格将会在隐式网格中创建行和列;
假如有多余的网格(也就是上面提到的隐式网格),那么它的行高和列宽可以根据 grid-auto-columns 属性和 grid-auto-rows 属性设置。它们的写法和grid-template-columns 和 grid-template-rows 完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高
默认排列
默认布局就是常规布局,item由内部元素内容撑开。
grid容器属性
grid-template-rows: 100px 100px 200px;
指定几个就是指定几行,数值指定的行的高度
-
grid-template-rows: repeat(10, 100px)
; 指定10个100px -
grid-template-rows: repeat(autofill, 100px)
; 每列100px,自动填充完毕父元素宽度 -
grid-template-rows: 1fr 1fr 2fr
;
fraction – 分数,就是按比例对父元素进行分配 -
grid-template-rows: repeat(4, 1fr)
; 平均分为4份
网格线可以进行命名,命名之后,就可以在原本使用网格线索引的位置直接使用自定义命名的网格线。 grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
-
grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
可以指定的值: - 100px 固定值
- 1fr 相当比例
- auto 自动扩充
- minmax() 最大最小范围
- auto-fill 列数量、行数量自适应
- repeat() 重复几个数字 repeat(auto-fill, 100px);
grid-template-columns: 100px 100px 100px;
指定几个就是指定几列,数值指定的是列的长度
grid-auto-rows: 200px
当没有指定行方向的
- auto 内容撑开
grid-column-gap: 10px
列与列之间单元格的间隔
grid-row-gap: 10px
行与行之间单元格的间隔
grid-template-areas
定义区域,定义完毕后可以在网格元素使用grid-area
中引用区域
grid-template-areas: 'a b c'
'a b c'
'a b c';
定义单元格区域,匿名区域使用.
表示;
区域的命名会影响到网格线,每个区域的起始网格线会自动命名为区域名-start
;终止网格线会自动命名为区域名-end
;
grid-auto-flow
划分网格后,容器的子元素会按照顺序,自动放置在每一个网格
- row 该关键字指定自动布局算法按照通过逐行填充来排列元素,在必要时增加新行。如果既没有指定 row 也没有 column,则默认为 row。
- column 该关键字指定自动布局算法通过逐列填充来排列元素,在必要时增加新列。
- dense 该关键字指定自动布局算法使用一种“稠密”堆积算法,如果后面出现了稍小的元素,则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白,但同时也可能导致原来出现的次序被打乱。
place-items
-
justify-items
单元格中元素水平方向的对齐方式 -
align-items
单元格中元素垂直方向的对齐方式 -
start | end | center | stretch
上、中、下、拉伸
place-content
指定整个内容区域的排布方式
justify-content
align-content
start | end | center | stretch | space-around | space-between | space-evenly;
指定行列的数据
- 100px 固定像素
- 1fr 按比例分配
- minmax(100px, 1fr) 指定最大最小值
- auto 由浏览器决定大小,直接将剩余空间占据
grid元素属性
grid-column-start: 1
规定从哪一列开始显示项目,或者跨越多少列
grid-column-end: 3
规定在哪一条列线(column-line)上停止显示项目,或跨越多少列。
grid-row-start: 1
grid-row-end: 3
指定的是网格线,指定元素占据网格范围,网格线索引从1开始;
简写:
grid-column: 1 / 3
grid-row: 1 / span 2
- 负数为网格从后往前数的位置
place-self
- justify-self
- align-self
注意
子元素内容撑开grid网格
当网格高度或者宽度设置为fr或者auto的时候,当子元素高度或者宽度超过了网格设置,子元素会将网格撑开;
解决方法
- 将网格宽度或者高度设置为px、百分比,但是此时不能设置
grid-gap
,设置之后就会出现子元素内容溢出的问题 - 网格中的元素设置
overflow: hidden
- 网格元素设置
width: 100%; height: 100%; overflow: hidden
之后,如果子元素越界,可以将对应的子元素设置为width: 100%; height: 100%; overflow: auto
,这样就可以通过滑动进行子元素全部内容查看
- 网格元素设置
grid-gap设置导致内容溢出
此时要留意gird-template-rows
或者gird-template-columns
的设置是不是用的百分比或者固定数值,如果是的话,那么设置grid-gap
就可能会造成内容溢出,就百分比而言,grid整体长度和宽度是先计算百分比,后叠加grid-gap;此时可以使用fr
的形式,这种情况下会刨除grid-gap
后再去计算fr
,这样就可以避免内容溢出;
grid格子与padding
grid格子分配的是grid元素content内容区的区域,因此如果当子元素超过grid单元格的时候,就会出现滚动条(overflow: auto
);而滚动条会紧贴grid格子,可以通过设置padding来分隔开这两部分,看起来会更舒服。文章来源:https://www.toymoban.com/news/detail-669974.html
移动端使用grid栅格元素高度为整个grid容器高度
这个要排查一下grid元素是否有设置display: grid
,没哟设置改属性,即使设置了grid-template-rows
;然后grid栅格元素中设置了height: 100%
之后,栅格子元素的高度就会直接为grid元素的高度,而不是栅格的高度。文章来源地址https://www.toymoban.com/news/detail-669974.html
到了这里,关于css-grid使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!