JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

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

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

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

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

CSS

.article-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: space-around;
}

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

.article-grid-item {
  width: 120px;
}

.grid-item-l {
  width:45%;
}

.item-l-1 {
  width:60%;
}

.item-l-2 {
  width:80%;
}

.item-l-3 {
  width: 45%;
  align-self: flex-end;
}

.item-l-4 {
  width: 45%;
  align-self: flex-end;
}

.item-p-1 {
  width:38%;
}

.item-p-2 {
  width: 44%;
}

.item-p-3 {
  width: 25%;
}

.item-p-4 {
  width: 34%;
}



p {
  margin-top: 0;
}