JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<div class="grid">
  <div class="grid-item" style="grid-column: 1 / span 3; grid-row: 1 / span 2">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item" style="grid-column: 3 / span 1; grid-row: 3 / span 1">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
  <div class="grid-item">
    <img src="http://placehold.it/300x300/" alt="" />
  </div>
</div>

CSS

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2px;
}
.grid-item{
  background-color: #000;
}
.grid-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.grid-item span{
  height: 100%
}
.grid-item:nth-child(2n+1){
  background-color: #cfcfcf;
}