Responsive grid with CSS Grids

Responsive grid with CSS Grids

by Matt Reynolds

HTML

<div class="row">
  <div class = "columns"><img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg" />
  <h3>Adam</h3></div>
  <div class = "columns"><img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg" />
  <h3>Adam</h3></div>
  <div class = "columns"><img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg" />
  <h3>Adam</h3></div>
  <div class = "columns"><img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg" />
  <h3>Adam</h3></div>
  <div class = "columns"><img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg" />
  <h3>Adam</h3></div>
  <div class = "columns"><img src="https://www.biography.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cg_face%2Cq_auto:good%2Cw_300/MTE4MDAzNDEwNzg5ODI4MTEw/barack-obama-12782369-1-402.jpg" />
  <h3>Adam</h3></div>
  
</div>

<div>Resize to see how grid responds....</div>

CSS

.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  grid-gap: 10px;
}

.columns {
  border-radius: 50%;
  padding: 20px;
}

.columns img {
  border-radius: 50%;
  width: 100%;
}

.columns h3 {
  text-align: center;
}