Grid 布局
容器 display: grid;
display: grid;
此定义为块级元素
display: inline-grid;
此定义为行级元素
display: grid;
display: inline-grid;
grid-template-columns(列)和grid-template-rows(行)
grid-template-columns 列
// 设置列,参数个数为列的数量,每个值为对应的列宽
grid-template-columns: 100px 200px 300px;
// 设置行,参数个数为行的数量,每个值为对应行的高
grid-template-rows: 50px 50px;
ps
以上定义为3列2行,列宽为 100px 200px 300px,行高为 50px 50px
repeat() 函数
可以简化重复的值。该函数接受两个参数,第一个参数是重复的次数,第二个参数是所要重复的值。比如上面行高都是一样的,我们可以这么去实现,实际效果是一模一样的
grid-template-rows: 50px 50px;
grid-template-rows: repeat(2, 50px); //repeat函数,第一个值为行的个数,第二个值为每行的高度
auto-fill 关键字 (自动填充)
auto-fill表示自动填充,让一行(或者一列)中尽可能的容纳更多的单元格
// 以下表示列为自动填充,每个为200px
grid-template-columns: repeat(auto-fill,200px);
fr 关键字(等分控制)
fr
单位代表网格容器中可用空间的一等份
和flex
相同原理
// 表示第一个列宽设置为 200px,后面剩余的宽度分为两部分
template-columns: 200px 1fr 2fr;
ps
1fr等同于flex:1; 2fr等同于flex:2;
minmax() 函数 (控制最大最小)
我们有时候想给网格元素一个最小和最大的尺寸,minmax() 函数产生一个长度范围
它接受两个参数,分别为最小值和最大值。
// 第三个列宽最少也是要 300px,但是最大不能大于第一第二列宽的两倍
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
auto 关键字
// 表示第一第三列为 100px,中间由浏览器决定长度
grid-template-columns: 100px auto 100px;
row-gap、column-gap、gap (间距)
设置网格间距
row-gap
设置行间距
column-gap
设置列间距
gap
简写属性 第一个参数为行间距 第二个参数为列间距 可写一个参数,一个参数则就是行间距和列间距相同
row-gap: 10px;
column-gap: 20px;
// 效果一样
gap: 10px 20px;
grid-template-areas & grid-area (自定义布局)
grid-template-areas 属性用于定义区域,一个区域由一个或者多个单元格组成
// 空着的需用`.`代替
grid-template-areas:
"a a ."
"a a ."
". b c";
实例
<section id="page">
<header>Header</header>
<nav>Navigation</nav>
<main>Main area</main>
<footer>Footer</footer>
</section>
#page {
display: grid; /* 1.设置 display 为 grid */
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot"; /* 2.区域划分 当前为 三行 两列 */
grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head; /* 4. 指定当前元素所在的区域位置,从 grid-template-areas 选取值 */
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
grid-auto-flow (自动布局)
grid-auto-flow
属性控制着自动布局算法怎样运作,精确指定在网格中被自动布局的元素怎样排列。
关键字
-
row
该关键字指定自动布局算法按照通过逐行填充来排列元素,在必要时增加新行。如果既没有指定
row
也没有column
,则默认为row
-
column
该关键字指定自动布局算法通过逐列填充来排列元素,在必要时添加新列
-
dense
该关键字指定自动布局算法使用一种“稠密”堆积算法,如果后面出现了稍小的元素,则会试图去填充网格中前面留下的空白。
justify-items、align-items、place-items (控制布局)
justify-items 控制水平布局
- stretch 默认值 相当于块级
- center 水平居中
- start 靠左对齐
- end 靠右对齐
align-items 控制垂直布局
- stretch 默认值
- center 垂直居中
- start 上
- end 下
place-items 简写属性 第一个参数为垂直,第二个为水平
justify-content、align-content、place-content
同flex布局
- start
- end
- center
- space-around 每个元素周围分配相同的空间
- space-between 首个元素放置于起点,末尾元素放置于终点
- space-evenly 每个元素之间的间隔相等
grid-auto-columns、grid-auto-rows
如果一个表格项目被定位在没有使用 grid-template-columns 显式指定尺寸的列中,隐式的 grid 轨道就会被创建出来支撑它。
grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列,但实际有九个元素,就会产生隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px
grid-column-start、grid-column-end、grid-column
grid-column
简写属性 (水平方向)
grid-row-start、grid-row-end、grid-row
grid-row
垂直方向
以上的缩写(上下左右)
grid-area
用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条,跨度或不添加任何内容(自动),从而指定其 grid area。
justify-self 属性、align-self 属性以及 place-self 属性
设置单元格内容的位置
justify-self
(左中右)
align-self
(上中下)
- stretch
- center
- start
- end