JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="grid">
  <div class="item">
    1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
  <div class="item">
    2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
<div class="item baz">
    3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
</div>

<hr>

<div class="grid">
  <div class="item">
    1Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
  <div class="item">
    2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
<div class="item baz">
    3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
  <div class="item baz">
    3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero laudantium perferendis soluta, facilis nobis eum, aliquam error corrupti?
  </div>
</div>

<div>
  <img src="https://marcel.imarc.host/01.png" alt="">
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  
  /* align-items: center; */
  /* justify-content: center; */
  /* justify-items: center; */
  
}

.item {
  background-color: peru;
  grid-column: span 2;
}

.item:last-child:nth-child(2n+1) {
  grid-column: 2 / span 2;
}