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カラム常にできます。