1、什么是Grid布局
Grid布局即网格布局,是一种新的css模型,一般是将一个页面划分成几个主要的区域,定义这些区域的大小、位置和层次等关系,是目前唯一一种css二维布局。
我们通过在元素上声明display:grid或者display:inline-grid来创建一个网格容器,这个元素的所有直系子元素将成为网格项目。
grid-template-columns和grid-template-rows属性来定义网格中的行和列
例1
<template>
<div class="gird">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.gird {
display: grid;
// 3列,每列100px repeat(3, calc()// 此处也可以通过计算获取)
grid-template-columns: repeat(3, 100px);
// 每行100px
grid-template-rows: 100px 100px;
height: 300px;
width: 300px;
border: 1px solid #e4e4e4;
.item1 {
background-color: lightblue;
}
.item2 {
background-color: lightcoral;
}
.item3 {
background-color: lightcyan;
}
.item4 {
background-color: lightgoldenrodyellow;
}
.item5 {
background-color: lightgray;
}
.item6 {
background-color: lightgreen;
}
}
</style>
例1效果图
例2
<template>
<div class="gird">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
<div class="item5">item5</div>
<div class="item6">item6</div>
</div>
</template>
<script>
export default {}
</script>
<style lang="less" scoped>
.gird {
display: grid;
// 3列,每列100px repeat(3, calc()// 此处也可以通过计算获取)
grid-template-columns: repeat(3, 100px);
// 每行100px
grid-template-rows: 100px 100px;
// 行列间距
// grid-gap: 0;
height: 300px;
width: 300px;
border: 1px solid #e4e4e4;
.item1 {
// 开始的基线 column垂直上分割的基线
grid-column-start: 1;
// 结束的基线
grid-column-end: 3;
background-color: lightblue;
}
.item2 {
// 相当于给了个定位在3-4基线这个格子
grid-column-start: 3;
// 开始的基线 row水平分割的基线
grid-row-start: 1;
// 结束的基线
grid-row-end: 3;
background-color: lightcoral;
}
.item3 {
background-color: lightcyan;
}
.item4 {
background-color: lightgoldenrodyellow;
}
.item5 {
background-color: lightgray;
}
.item6 {
grid-column-start: 4;
grid-column-end: 2;
background-color: lightgreen;
}
}
</style>
例2效果图