初始布局
<template>
<div>
<div class="box">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">4</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
</div>
</div>
</template>
<script>
export default {
name: '',
components: {},
data() {
return {};
},
methods: {},
};
</script>
<style scoped lang="less">
.box {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
.item-1 {
background-color: red;
}
.item-2 {
background-color: rgb(57, 169, 255);
}
.item-3 {
background-color: green;
}
.item-4 {
background-color: rgb(255, 255, 123);
}
.item-5 {
background-color: pink;
}
.item-6 {
background-color: orange;
}
.item-7 {
background-color: purple;
}
.item-8 {
background-color: gray;
}
.item-9 {
background-color: black;
}
}
</style>
一、容器属性（加给父盒子.box）
1. display
属性值 grid | inline-grid
2. grid-template-columns，grid-template-rows
固定大小
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
百分比
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.3%;
auto
grid-template-columns: 100px auto 100px;
grid-template-rows: 100px auto 100px;
两边固定，中间自动
repeat()
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
repeat()重复模式：
grid-template-columns: repeat(2, 100px 50px 20px);
grid-template-rows: repeat(2, 50px 100px);
// grid-template-columns: repeat(2, 25% 15% 10%);
// grid-template-columns: repeat(2, 3fr 2fr 1fr);
// grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
repeat()重复模式效果：
repeat()参数说明
第一个参数：数字 | auto-fill |
数字代表一行重复的次数
auto-fil：如果希望每一行（列）尽可能容纳更多单元格时使用，表示自动填充
后边的参数
固定值 | 百分比 | fr | 范围（一般搭配 auto-fill 一起使用）
3. row-gap, column-gap, gap，（老版标准：grid-row-gap, grid-column-gap, grid-gap）
row-gap：行与行间距
column-gap：列与列间距
gap：合并简写形式
display: grid;
width: 100%;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
row-gap: 10px;
column-gap: 15px;
// gap: 10px 15px; // 简写
4. grid-template-areas 定义区域
和项目属性grid-area一起使用，实现自定义排列
.box {
display: grid;
width: 100%;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-template-areas: 'e b c' 'd a f' 'g h i';
// grid-auto-flow: column;
.item {
text-align: center;
}
.item-1 {
background-color: red;
grid-area: a;
}
.item-2 {
background-color: rgb(57, 169, 255);
grid-area: b;
}
.item-3 {
background-color: green;
grid-area: c;
}
.item-4 {
background-color: rgb(255, 255, 123);
grid-area: d;
}
.item-5 {
background-color: pink;
grid-area: e;
}
.item-6 {
background-color: orange;
grid-area: f;
}
.item-7 {
background-color: purple;
grid-area: g;
}
.item-8 {
background-color: gray;
grid-area: h;
}
.item-9 {
background-color: black;
grid-area: i;
}
}
grid-template-areas: 'a a a' 'b b b' 'c c c'; 实现合并
.box {
display: grid;
width: 100%;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-template-areas: 'a a a' 'b b b' 'c c c';
// grid-auto-flow: column;
.item {
text-align: center;
}
.item-1 {
background-color: red;
grid-area: a;
}
.item-2 {
background-color: rgb(57, 169, 255);
grid-area: a;
}
.item-3 {
background-color: green;
grid-area: a;
}
.item-4 {
background-color: rgb(255, 255, 123);
grid-area: b;
}
.item-5 {
background-color: pink;
grid-area: b;
}
.item-6 {
background-color: orange;
grid-area: b;
}
.item-7 {
background-color: purple;
grid-area: c;
}
.item-8 {
background-color: gray;
grid-area: c;
}
.item-9 {
background-color: black;
grid-area: c;
}
}
5. grid-auto-flow 定义排列顺序，默认是row
row: 行排列
column: 列排列
row dense：先行后列，尽可能紧密填满行
可以和 grid-column-start， grid-column-end 一起使用
默认不加：
.box {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
.item {
text-align: center;
}
.item-1 {
background-color: red;
grid-column-start: 1;
grid-column-end: 3;
}
.item-2 {
background-color: rgb(57, 169, 255);
grid-column-start: 1;
grid-column-end: 3;
}
.item-3 {
background-color: green;
}
.item-4 {
background-color: rgb(255, 255, 123);
}
.item-5 {
background-color: pink;
}
.item-6 {
background-color: orange;
}
.item-7 {
background-color: purple;
}
.item-8 {
background-color: gray;
}
.item-9 {
background-color: black;
}
}
grid-auto-flow: row dense;
column dense：先列后行，尽可能紧密填满列
可以和 grid-column-start， grid-column-end 一起使用
grid-auto-flow: column dense;
6. justify-items align-items place-items
justify-items： 设置单元格内容水平位置（左中右）
align-items：设置单元格内容垂直位置（上中下）
place-item: 合并简写：< align-item > < justify-item >
取值：start end center stretch(拉伸，占满单元格的整个宽度 默认值)
.box {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-items: start;
}
start
center
end
align-items: start;
center
end
7. align-content，justify-content，place-content
align-content是上中下布局
justify-content是左中右布局
place-content: 合并简写： < align-content> < justify-content>
属性值是：start | center | end | space-around | space-between | sapce-evenly
以下以align-content为例
align-content: start;
.box {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
border: 1px solid #000;
align-content: start;
height: 600px;
}
align-content: center;
align-content: end;
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
二、项目属性（加给子项目.item-N）
1. grid-column-start
项目左边框所在垂直网格线
2. grid-column-end
项目右边框所在垂直网格线
3. grid-row-start
项目上边框所在水平网格线
4. grid-row-end
项目下边框所在水平网格线
5. grid-column: < grid-column-start> / < grid-column-end>
6. grid-row: < grid-row-start> / < grid-row-end>
属性值： 数字 | span 数字 | 网格线名字
例如 值为数字
.item-1 {
background-color: red;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 4;
}
值为span 数字 表示跨越的值
.item-1 {
background-color: red;
grid-column-start: span 2;
grid-row-start: span 2;
}
值为网格线名字
.box {
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-1 {
background-color: red;
grid-area: e;
grid-column-start: e-start;
grid-column-end: f-end;
}
}
- grid-area
指定项目放在那个区域
grid-area: a; 设置后默认当前的网格线为a-start a-end
也可以是前几个属性的组合：grid-area: / / /
7. justify-self align-self place-self
justify-self：设置单元格内容的水平位置（左中右）
align-self： 设置单元格内容的垂直位置（上中下）
place-self：< align-self>< justify-self>
值： start | center | end | stretch（默认）
.item-1 {
background-color: red;
justify-self: start;
}
justify-self
left
center
end
stretch
.item-1 {
background-color: red;
align-self: start;
}
align-self
start
center
end
stretch
