Gridの使い方

#Grid

index.html

  <div class="wrapper">
    <div class="box">
      <a href="#">
        <h3>東京の建築A</h3>
        <img src="img/tokyo-station.jpg" alt="">
        <p>koment</p>
      </a>
    </div><!-- ./box -->
  </div><!-- ./wrapper -->

style.css

.wrapper{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 16px;/* 真ん中だけ隙間16px */
}

　grid-template-columns: repeat(4, 1fr);と書くと、4カラム常にできます。