简介
- 容器和项目
Grid 布局采用网格的布局方式,称为容器(container)。内部采用网格布局的元素称为项目(item)。
2. 行和列、单元格
- 网格线
划分网格的线称为网格线(grid line)。可以看到从最左边开始,网格线从line 1开始计数。
display 属性
根据之前所学,通过display
属性可以设置为行内Grid和块级Grid,默认为块级元素。
.container {
display: grid | inline-grid;
}
gird-template-rows 和 grid-template-columns
可以通过grid-template-rows
来确定行的布局,通过grid-template-columns
来确定列的布局。下面汇总我所知道的grid-template-rows/columns
的写法:
- 第一种,直接用大小布局(接下来省略
.container {}
)
.container {
grid-template-columns: 100px 150px 100px 120px;
grid-template-rows: 33% 33% 33%;
}
可以使用百分比
- 第二种,使用repeat()
grid-template-columns: repeat(4, 100px);
- 第三种,使用fr来根据比例分配(2fr是1fr的两倍),可以和绝对长度搭配使用(px)。这样就是三列成1 : 2 : 3的比例。
grid-template-columns: 1fr 2fr 3fr;
- 第四种,使用auto-fill关键字如果告诉你容器的宽度为400px,每个单元格分配的大小是100pxs,对于列布局你可能就需要计算一下,400 / 50 = 8所以你分配4列。其实这个工作可以交给
auto-fill
关键字来自动完成,你只需要有容器的宽度或者高度,并告诉它需要分配的大小为多少,auto-fill
就会在不溢出容器的情况下尽可能多得塞满容器。该代码大概就是在说🤔我的宽度为400px,每个元素占90px,然后你自己看着放吧,能放多少就是多少!
.container {
width: 400px;
height: 350px;
border: 1px solid blue;
display: inline-grid;
grid-template-columns: repeat(auto-fill, 90px);
grid-template-rows: repeat(auto-fill, 100px);
}
- 第五种,
min-max()
限制第三列宽度在[300px, 1fr]之间。
grid-template-columns: 1fr 1fr minmax(300px, 1fr);
- 第六种,
auto
关键字全自动模式!
grid-template-columns: 100px auto 100px;
gap 属性
gap属性可以网格中每一列之间的间距和每一行之间的间距。
有三种写法:
- row-gap
- column-gap
- gap
其中gap是行和列的合并写法:
grid-gap: <grid-row-gap> <grid-column-gap>;
也就是说这两种写法是等价的(这里只保留了核心代码,省略了很多,如display
。):
.container {
gap: 10px 30px;
/* 等价于下面的: */
row-gap: 10px;
column-gap: 30px;
}
place-item 属性
通过,place-item可以设置单元格内容的水平和垂直位置,类似flex。
同样的,place-item
是align-item
和justify-item
的合并写法。
place-items: <align-items> <justify-items>;
其中,align-item
是垂直方向的调整,justify-items
是水平方向上的调整,分开来使用方法如下:
justify-items: start | end | center | stretch(默认值,拉伸);
align-items: start | end | center | stretch;
合并也一样,这里省略🥱。
place-content 属性
和place-item
属性保持一致,place-content
是justify-content
和align-content
的合并写法:
place-content: <align-content> <justify-content>
这里能找到一个规律,和padding、margin属性类似,合并写法都是先上下方向↕️再左右↔️方向。
justify-content
用于确定整个内容区域在容器里的水平位置,align-content
用于确定整个内容区域在容器中的垂直位置,单独使用方法如下:
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
space-around | space-between | space-evenly
三者都是均匀分布,区别在于项目两侧的间距:
space-around
:项目(item)两侧的空白区域都一样,这样项目与项目之间的大小就比项目与容器边框的大小大一倍。space-between
:项目与项目之间的间隔相等,项目与容器边框没有间隔。space-evenly
:项目与项目的间隔相等,项目与边框的间隔也是同样的长度。
gird-template-area 属性
该属性可以为grip
划分区域:
.container {
display: grid;
grid-template-columns: 100px 150px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
'a b c'
'd d f'
'g h .';
}
d
为多个区域合并,并且这里是两个区域合并。不使用的区域可以使用.
来进行占位。
grid-auto-flow 属性
默认情况下网格的排列为先行后列(row),将其设置为(column)可以设置为先列后行:
grid-auto-flow: row;
如果加上dense
关键字,在使用了grid-column-start/end: xxx;
和grid-row-start/end: xxx;
之类的项目属性来控制跨行跨列时,会自动排列空白单元格,使用方法:
grid-auto-flow: row dense;
— ——- —
grid-column 和 grid-row 属性
grid-column
属性是grid-column-start
和grid-column-end
的合并写法,也就是常说的简写形式。同样的,grid-row
属性是grid-row-start
和grid-row-end
的简写形式:
.item {
grid-column: <start-line> / <end-line>;
grid-row: <start-line> / <end-line>;
}
grid-column和grid-row是用来控制项目的位置的,我们叫做项目属性。
下面说说这两个属性的使用方法:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-flow: row;
}
.item:nth-child(1) {
grid-column-start: 1;
grid-column-end: 3;
}
.item:nth-child(2) {
grid-column-start: 1;
grid-column-end: 3;
}
这里的-start
就是开始的网格线,-end
是结束的网格线,在前面的简介中有介绍。并且网格线从1开始。除了写清楚两根开始和结束的网格线的写法,还有另一种写法:
.item:nth-child(1) {
grid-column-start: span 2;
}
这种写法表示该单元格跨越两个网格。
简写的写法如下:
.item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1 / 2;
}
这里也是同样的原理,/
左边是开始的网格线,右边是结束的网格线。同样可以使用span
写法来通过开始网格线和跨越单元格数量来进行位置的控制。
.item:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
place-self 属性
之前讲到place-items
属性的功能是设置单元格内容的位置。但是有一个缺陷,那就是范围太大了,使用place-item
会对所有项目也就是单元格实施同样的位置设置。为了解决这个问题,就有了place-self
,该方法允许单元格在自己的css
选择器中控制自己内容的位置,更加的灵活多变。
同样,他也有自己的简写形式:
place-self: <align-self> <justify-self>;
水平和垂直各自使用方法如下:
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
grid-area
之前介绍过grid-template-area
,用于手动划分网格区域,该属性需要搭配grid-area
来进行使用。因为之前的划分区域中不是有a b c···
这种字母吗?这些字母相当于是一个区域的表示,我们需要在项目,也就是单元格中告诉单元格它属于哪个字母所表示的区域。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas:
'a b c'
'd e f'
'g h i';
}
.item:nth-child(1) {
grid-area: e;
}
grid-area
还可以用作grid-column
和grid-row
的简写形式:
grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
总结
网格被分为了网格容器和项目,其中容器有容器的属性,项目有项目的属性。
容器属性有以下这些:
display
属性grid-template-columns
和grid-template-rows
属性row-gap
、column-gap
和gap
属性justify-items
、align-items
、place-items
属性justify-content
、align-content
、place-content
属性grid-template-areas
属性grid-auto-flow
属性
项目属性有以下这些:
grid-column-start
、grid-column-end
、grid-row-start
、grid-row-end
属性grid-column
、grid-row
属性justify-self
、align-self
、place-self
属性grid-area
属性
本文内容如果学会了,亲测可手撕web组国赛题中大多数布局相关的小题。