本文主要介绍了grid布局几个常用属性(不全)
首先和flex布局一样分为容器属性和项目属性
通过对容器设置display: grid来实现grid布局
容器属性:
1. grid-template-columns属性,grid-template-rows属性
如下代码指定了一个3行3列的容器,单个网格的大小为100px * 100px
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
1.1 属性值可以是绝对单位,如100px; 当然也可以使用百分比方式
.container {
display: grid;
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.3%;
}
1.2 如果是重复的值,可以使用repeat()函数
.container {
display: grid;
grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%);
}
1.3 auto-fill关键字
如下代码表示每个网格大小为100px * 100px,多余的位置自动填充,直至容不下一个网格,然后换行
.container {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
grid-template-rows: repeat(auto-fill, 100px);
}
1.4 minmax()
minmax()
函数产生一个长度范围,表示长度就在这个范围之中。它接受两个参数,分别为最小值和最大值。如下代码表示容器共分为3列,最后一列列宽不小于100px,不大于120px。
grid-template-columns: 100px 100px minmax(100px, 120px);
1.5 auto关键字
auto
关键字表示由浏览器自己决定长度。
如下代码表示容器共分为3列,在没有其他属性干扰的情况下,第2列默认占满容器剩余部分
grid-template-columns: 100px auto 100px;
2. grid-row-gap 属性,grid-column-gap 属性,grid-gap 属性
grid-row-gap 设置行与行之间的间隔;grid-column-gap 设置列与列之间的间隔;grid-gap是grid-row-gap和grid-column-gap的缩写
grid-gap: grid-row-gap grid-column-gap
如果grid-gap省略了第二个值,浏览器认为第二个值等于第一个值。
.container {
grid-row-gap: 20px;
grid-column-gap: 30px;
}
// 可以简写为
.container {
gridw-gap: 20px 30px;
}
3. grid-template-areas 属性
网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成。grid-template-areas
属性用于定义区域。
.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';
}
4.justify-items 属性,align-items 属性,place-items 属性
justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下);place-items属性是align-items属性和justify-items属性的合并简写形式。
place-item: align-items justify-items;
属性值:
- start:对齐单元格的起始边缘。
- end:对齐单元格的结束边缘。
- center:单元格内部居中。
- stretch:拉伸,占满单元格的整个宽度(默认值)。
5. justify-content 属性,align-content 属性,place-content 属性
justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下); place-content属性是align-content属性和justify-content属性的合并简写形式。
place-content: align-content justify-content;
属性值:
- start - 对齐容器的起始边框。
- end - 对齐容器的结束边框。
- center - 容器内部居中。
- stretch - 项目大小没有指定时,拉伸占据整个网格容器。
- space-evenly - 项目与项目的间隔相等,项目与容器边框之间也是同样长度的间隔。
- space-between - 项目与项目的间隔相等,项目与容器边框之间没有间隔。
- space-around - 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与容器边框的间隔大一倍。
最后,grid布局详细介绍这篇文章不错CSS Grid 网格布局教程 - 阮一峰的网络日志