JSFiddle - React, Tailwind, and code Playground

by Michael Coomey

HTML

<div class="grid-container"> 

  <div class="grid-item">
    <img src="http://placebeyonce.com/200-150/" alt="beyonce">
    <h2>Primary Row Title</h2>
  </div>
  
  <div class="grid-item">
    <h2>Title</h2>
  </div>
  
  <div class="grid-item">
    <h2>Another Title</h2>
  </div>
</div>


<div class="grid-container2">
  <div class="grid-item">
    <h2>Secondary Row Title</h2>
  </div>
  
  <div class="grid-item">
    <h2>Title Here</h2>
  </div>
</div>

<div>
  <div class="grid-item">
    <h2>Row Title</h2>
  </div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 33% 34% 33%;
  grid-template-rows: 50px 15px;
  /* grid-column-gap: 10px; */
  /* grid-row-gap: 20px; */
}

.grid-container2 {
  display: grid;
  grid-template-columns: 50% 50%;
  /* grid-template-rows: 50px 15px; */
  /* grid-column-gap: 10px; */
  /* grid-row-gap: 20px; */
}

.grid-item {
  border: 1px solid #222;
  text-align: center;
}
h2 {
  margin: 10px 0;
  font-family: sans-serif;
  font-size: 14px;
}
img {
  width: 100%;
}