JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

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

CSS

.article-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 8px;
  grid-template-areas:
    "A B"
    "C D";
}

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


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

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

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

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

.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;
}