文章目录
- 一、容器属性:
- 1.1 display 属性
- 1.2 grid-template-columns 属性, grid-template-rows 属性
- 1.3 grid-row-gap 属性, grid-column-gap 属性, grid-gap 属性
- 1.4 grid-template-areas 属性
- 1.5 grid-auto-flow 属性
- 1.6 justify-items 属性, align-items 属性, place-items 属性
- 1.7 justify-content 属性, align-content 属性, place-content 属性
- 1.8 grid-auto-columns 属性, grid-auto-rows 属性
- 二、项目属性
写在前面: grid布局反反复复学了 n 遍,因为应用不多导致经常遗忘,每次看阮一峰grid教程虽然详细但是也篇幅太长,根据 阮一峰大师的CSS Grid 网格布局教程整理成速查笔记,方便后续快速回忆.如果没有网格布局基础建议直接到 原文地址学习。
概念: 采用网格布局的区域,称为"容器"(container)。容器内部采用网格定位的子元素,称为"项目"(item)。
一、容器属性:
1.1 display 属性
display: grid
指定一个容器采用网格布局。
display: inline-grid
容器元素都是块级元素,但也可以设成行内元素。
注意: 设为网格布局以后,容器子元素(项目)的float
、display: inline-block
、display: table-cell
、vertical-align
和column-*
等设置都将失效。
1.2 grid-template-columns 属性, grid-template-rows 属性
grid-template-columns
属性定义每一列的列宽
grid-template-rows
属性定义每一行的行高
repeat() 函数
接受两个参数,第一个参数是重复的次数(上例是3),第二个参数是所要重复的值。也可以重复某种模式
auto-fill 关键字
单元格的大小是固定的,但是容器的大小不确定。如果希望每一行(或每一列)容纳尽可能多的单元格,这时可以使用
auto-fill
关键字表示自动填充。
auto-fit关键字
两者的行为基本是相同的。只有当容器足够宽,可以在一行容纳所有单元格,并且单元格宽度不固定的时候,才会有行为差异:
auto-fill
会用空格子填满剩余宽度,auto-fit
则会尽量扩大单元格的宽度。
fr 关键字
为了方便表示比例关系,网格布局提供了
fr
关键字(fraction 的缩写,意为"片段")。如果两列的宽度分别为1fr
和2fr
,就表示后者是前者的两倍
minmax() 函数
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。
auto 关键字
auto
关键字表示由浏览器自己决定长度。除非单元格内容设置了min-width
,且这个值大于最大宽度。
网格线的名称
container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
1.3 grid-row-gap 属性, grid-column-gap 属性, grid-gap 属性
grid-row-gap
属性设置行与行的间隔(行间距)
grid-column-gap
属性设置列与列的间隔(列间距)。
grid-gap
属性是grid-row-gap
和grid-column-gap
的合并简写形式,如果grid-gap
省略了第二个值,浏览器认为第二个值等于第一个值。
1.4 grid-template-areas 属性
grid-template-areas
属性用于定义区域。如果某些区域不需要利用,则使用"点"(.
)表示。
grid-template-areas: 'a . c'
'd . f'
'g . i';
1.5 grid-auto-flow 属性
grid-auto-flow
属性决定项目在容器中的放置顺序,默认值是row
,即"先行后列"。也可以将它设成column
,变成"先列后行"。
grid-auto-flow
属性除了设置成row
和column
,还可以设成row dense
和column dense
。设为row dense
,表示"先行后列",并且尽可能紧密填满,尽量不出现空格。
1.6 justify-items 属性, align-items 属性, place-items 属性
justify-items
属性设置单元格内容的水平位置(左中右),align-items
属性设置单元格内容的垂直位置(上中下)。place-items
属性是align-items
属性和justify-items
属性的合并简写形式。
1.7 justify-content 属性, align-content 属性, place-content 属性
justify-content
属性是整个内容区域在容器里面的水平位置(左中右),align-content
属性是整个内容区域的垂直位置(上中下)。
place-content
属性是align-content
属性和justify-content
属性的合并简写形式。
1.8 grid-auto-columns 属性, grid-auto-rows 属性
有时候,一些项目的指定位置,在现有网格的外部。比如网格只有3列,但是某一个项目指定在第5行。这时,浏览器会自动生成多余的网格,以便放置项目。
grid-auto-columns
属性和grid-auto-rows
属性用来设置,浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns
和grid-template-rows
完全相同。如果不指定这两个属性,浏览器完全根据单元格内容的大小,决定新增网格的列宽和行高。
二、项目属性
2.1 grid-column-start 属性, grid-column-end 属性, grid-row-start 属性, grid-row-end 属性
grid-column-start
属性:左边框所在的垂直网格线grid-column-end
属性:右边框所在的垂直网格线grid-row-start
属性:上边框所在的水平网格线grid-row-end
属性:下边框所在的水平网格线- 这四个属性的值还可以使用
span
关键字,表示"跨越",即左右边框(上下边框)之间跨越多少个网格
2.2 grid-column 属性, grid-row 属性
grid-column
属性是grid-column-start
和grid-column-end
的合并简写形式,grid-row
属性是grid-row-start
属性和grid-row-end
的合并简写形式。
2.3 grid-area 属性
grid-area
属性指定项目放在哪一个区域。
grid-area
属性还可用作grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的合并简写形式,直接指定项目的位置。
.item {
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}
2.4 justify-self 属性, align-self 属性, place-self 属性
justify-self
属性设置单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
单元格内容的水平位置(左中右),跟justify-items
属性的用法完全一致,但只作用于单个项目。
align-self
属性设置单元格内容的垂直位置(上中下),跟align-items
属性的用法完全一致,也是只作用于单个项目。
place-self
属性是align-self
属性和justify-self
属性的合并简写形式