Grid-Row_gap after 2 rows

Responsive grid with CSS Grids

by jmjjeena

HTML

<div class="container">
  <div class="sub-wrapper">
    <div>Name</div>
    <div>ABC</div>
  </div>
  <div class="sub-wrapper">
    <div>Address</div>
    <div>Xyz st.</div>
  </div>
  <div class="sub-wrapper">
    <div>Notes</div>
    <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap...</div>
  </div>
</div>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
  background-color: white;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-row-gap: 29px;
  grid-template-rows: 36px 36px 54px;
  padding: 16px 41px 21px 28px;
  box-sizing: border-box;
  border: 1px solid grey;
  border-radius: 5px;
  text-align: justify;
}

.sub-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  justify-content: start;
}