JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

<h1>Grid 2L 2P</h1>

<div class="grid grid-2l-2p">
  <div class="item item-landscape-1">
    <img src="https://source.unsplash.com/ZqLeA54zRbo">
    <p>Caption laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="item item-landscape-2">
    <img src="https://source.unsplash.com/4OE7uPd8bTQ">
    <p>Caption ed do eiusmod tempor incididunt ut labore et dolore magna.</p>
  </div>
  <div class="item item-portrait-1">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Caption</p>
  </div>
  <div class="item item-portrait-2">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<h1>Grid 3L 1P</h1>

<div class="grid grid-3l-1p">
  <div class="item item-landscape-1">
    <img src="https://source.unsplash.com/ZqLeA54zRbo">
    <p>Caption laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="item item-landscape-2">
    <img src="https://source.unsplash.com/4OE7uPd8bTQ">
    <p>Caption ed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="item item-landscape-3">
    <img src="https://source.unsplash.com/4OE7uPd8bTQ">
    <p>Caption ed do eiusmod tempor incididunt ut labore et dolore magna.</p>
  </div>
  <div class="item item-portrait-1">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
</div>

<h1>Grid 1L 3P</h1>

<div class="grid grid-1l-3p">
  <div class="item item-landscape-1">
    <img src="https://source.unsplash.com/ZqLeA54zRbo">
    <p>Caption laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
    <div class="item item-portrait-1">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Caption</p>
  </div>
  <div class="item item-portrait-2">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
    <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="item item-portrait-3">
    <img src="https://source.unsplash.com/mKu0Mbl9Y1E">
   ...

CSS

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

.grid-2l-2p {
  grid-template-areas:
    "L1 L1 L1 P1"
    "P2 P2 L2 L2";
}

.grid-3l-1p {
  grid-template-areas:
    "L1 L1 L2 L2"
    "L3 L3 L3 P1";
}

.grid-1l-3p {
  grid-template-areas:
    "L1 L1 L1 P1"
    "P2 P2 P3 P3";
}


.item-landscape-1 {
  grid-area: L1;
  background-color: red;
}

.item-landscape-2 {
  grid-area: L2;
  background-color: orange;
}

.item-landscape-3 {
  grid-area: L3;
  background-color: yellow;
}

.item-landscape-4 {
  grid-area: L4;
  background-color: green;
}

.item-portrait-1 {
  grid-area: P1;
  background-color: blue;
}

.item-portrait-2 {
  grid-area: P2;
  background-color: indigo;
}

.item-portrait-3 {
  grid-area: P3;
  background-color: violet;
}

.item-portrait-4 {
  grid-area: P4;
  background-color: beige;
}

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

p {
  margin-top: 0;
}