基础使用
<template>
<div class="container">
<div class="item item1"><span>1</span></div>
<div class="item item2"><span>2</span></div>
<div class="item item3"><span>3</span></div>
<div class="item item4"><span>4</span></div>
<div class="item item5"><span>5</span></div>
<div class="item item6"><span>6</span></div>
<div class="item item7"><span>7</span></div>
<div class="item item8"><span>8</span></div>
<div class="item item9"><span>9</span></div>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style>
.container {
width: 50%;
height: 500px;
margin: auto;
background-color: lightgray;
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
justify-content: center;
align-content: center;
}
.item {
text-align: center;
line-height: 100px;
font-size: 22px;
font-weight: 5000;
}
.item1 {background-color: red;}
.item2 {background-color: orange;}
.item3 {background-color: yellow;}
.item4 {background-color: green;}
.item5 {background-color: cyan;}
.item6 {background-color: blue;}
.item7 {background-color: purple;}
.item8 {background-color: white;}
.item9 {background-color: gray;}
结果
1. display属性
需要通过display: grid;设置div采用Grid布局，作为网格容器；
默认情况下，Grid容器是块元素，可以通过
display: inline-grid;设置为行元素；
2. grid-template-columns、grid-template-rows
-
grid-template-columns用来定义每一列的宽度，以及共多少列； -
grid-template-rows用来定义每一行的高度，以及共多少行；
上面例子中，定义了三列，每列的宽度是100px；定义了三行，每行的高度是100px；
3. justify-content、align-content
justify-content：是整个内容区域在容器里面的水平位置：
align-content：是整个内容区域在容器里面的垂直位置；
这两个属性的写法相同，都可以用一下的值；
-
start：对齐容器的起始边框：
结果 -
end：对齐容器的结束边框：
结果 -
center：容器内部居中：
结果 stretch：项目没有指定大小时，拉伸沾满整个容器
这里我们已经指定了项目的大小；不做效果展示；-
space-around：每个项目两侧的间距相等；项目之间的间隔比项目与容器之间的间隔大一倍；
结果 -
space-between：项目与项目之间的间隔相等，项目与容器之间没有间隔；
结果
align-content的值和justify-content完全相同，只是将水平方向改成垂直方向；
