flex布局

<template>
  <div class="container">
    <div class="item" :style="{
    'background': `rgb(${Math.floor(Math.random()*255)}, 
    ${Math.floor(Math.random()*255)}, 
    ${Math.floor(Math.random()*255)}`}" 
    v-for="i in 6">{{i}}</div>
  </div>
</template>

.item{
    background: #ddd;
    margin: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    height: 50px;
    flex-grow: 1;
    min-width: 100px;
  }
  .container{
    display: flex;
    flex-wrap: wrap;
  }

效果虽好，不过最后一个元素铺满整行的样式却不是需求，希望跟其他元素保持相同比例。

grid布局

<template>
  <div class="container">
    <div class="item" :style="{
    'background': `rgb(${Math.floor(Math.random()*255)}, 
    ${Math.floor(Math.random()*255)}, 
    ${Math.floor(Math.random()*255)}`}" 
    v-for="i in 6">{{i}}</div>
  </div>
</template>
​
<style>
  .item{
    background: #ddd;
    margin: 5px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    color: #fff;
    height: 50px;
  }
  .container{
    display: grid;
    grid-template-columns: 100px 100px 100px;
  }
  .container{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
  }
  .container{
    display: grid;
    grid-template-columns: repeat(3, 100px);
  }
  .container{
    display: grid;
    grid-template-columns: repeat(auto-fit, 100px);
  }
  .container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
  }
</style>

grid-template-columns

N种姿势概览：

grid-template-columns: 100px 100px 100px;
grid-template-columns: 100px 1fr
grid-template-columns: 1fr 2fr 1fr;
grid-template-columns: repeat(3, 100px);
grid-template-columns: repeat(auto-fit, 100px);
grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));

fr

grid-template-columns: 1fr 2fr 1fr;

全拼：flex fraction——伸缩系数，它允许你将容器分割成您想要的任意多个份数。

可类比于【flex】布局的flex:1

reapeat()

这是一种更强大的指定列和行的方法。

repeat(3,100px) 等于100px 100px 100px。第一个参数指定你想要多少列或行，第二个参数指定它们的宽度。

auto-fit

grid-template-columns: repeat(auto-fit, 100px)

网格现在会随着容器的宽度而改变列的数量。

它尝试在容器中容纳尽可能多的100px宽的列。然而，如果我们将所有列固定为100px，将永远无法获得想要的灵活性，因为它们很少会加到全宽度。如下图gif所示，网格的右边经常会留出空白。

minmax(min, max)

grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));

定义了大于或等于min和小于或等于max的大小范围，所以每列都至少是100px。然而，如果有更多的可用空间，网格将简单地将其平均分配给每一列，列将变成一个小数单位，而不是100 px。