JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

<div class="grid grid-l1-p1--b">
  <div class="grid-item-l1">
    <img src="https://source.unsplash.com/ZqLeA54zRbo">
    <p>Caption laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="grid-item-p1">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<div class="grid grid-l1-p1 grid-align-center">
  <div class="grid-item-l1">
    <img src="https://source.unsplash.com/ZqLeA54zRbo">
    <p>Caption laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="grid-item-p1">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<div class="grid grid-p1-l1">
  <div class="grid-item-p1">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="grid-item-l1">
    <img src="https://source.unsplash.com/4OE7uPd8bTQ">
    <p>Caption ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

<div class="grid grid-l1-l2">
  <div class="grid-item-l1">
    <img src="https://source.unsplash.com/4OE7uPd8bTQ">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="grid-item-l2">
    <img src="https://source.unsplash.com/4OE7uPd8bTQ">
    <p>Caption ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 8px;
}

.grid-l1-p1 {
  grid-template-areas: "L1 L1 L1 L1 L1 L1 L1 P1 P1 P1 P1 P1";
}

.grid-l1-p1--b {
  grid-template-areas: "L1 L1 L1 L1 L1 L1 L1 P1 P1 P1 P1 P1";
  align-items: center;
}


.grid-p1-l1 {
  grid-template-areas: "P1 P1 P1 P1 P1 L1 L1 L1 L1 L1 L1 L1";
}

.grid-l1-l2 {
  grid-template-areas: "L1 L1 L1 L1 L1 L1 L2 L2 L2 L2 L2 L2";
}

.grid-p1-p2 {
  grid-template-areas: "P1 P1 P1 P1 P1 P1 P2 P2 P2 P2 P2 P2";
}

.grid-item-l1 {
  grid-area: L1;
}

.grid-item-l2 {
  grid-area: L2;
}

.grid-item-p1 {
  grid-area: P1;
}

.grid-item-p2 {
  grid-area: P2;
}


img {
  width: 100%;
  border-radius: 8px;
}

p {
  margin-top: 0;
}