Grid布局（二）基础使用

基础使用

<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完全相同，只是将水平方向改成垂直方向；