JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

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

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

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

CSS

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

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

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

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

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

.grid-4l-0p {
  grid-template-areas:
    "L1 L1 L1 L1 L1 L1 L1 L2 L2 L2 L2 L2"
    "L3 L3 L3 L3 L3 L4 L4 L4 L4 L4 L4 L4";
}

.grid-0l-4p {
  grid-template-areas:
    "P1 P1 P1 P1 P1 P1 P2 P2 P2 P2 P2 P2"
    "P3 P3 P3 P3 P3 P3 P3 P3 P3 P3 P3 P3";
}


.item-l-1 {
  grid-area: L1;
}

.item-l-2 {
  grid-area: L2;
}

.item-l-3 {
  grid-area: L3;
}

.item-l-4 {
  grid-area: L4;
}

.item-p-1 {
  grid-area: P1;
}

.item-p-2 {
  grid-area: P2;
}

.item-p-3 {
  grid-area: P3;
}

.item-p-4 {
  grid-area: P4;
}



p {
  margin-top: 0;
}