# Flexbox: Align last row to grid


完成

<div class='container'>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
  <div class="box">11</div>
</div>

body {
  padding: 20px;
}
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 20px;
  row-gap: 20px;
  
  
  // 加入這一行
  &:after {
    content: "";
    flex: 0 0 calc(33.33% - 20px);
  }
  .box {
    flex: 0 1 calc(33.33% - 20px);
    background: #ccc;
  }
}