Test GRid or flex

by spacexplorer

HTML

<div class="nutrient-grid">
  <div class="card large">Large</div>
  <div class="card large">Large</div>
  <div class="card large">Large</div>

  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
  <div class="card small">Small</div>
</div>

CSS

.nutrient-grid {
  --cell: clamp(44px, 6vw, 52px);
  --gap: clamp(12px, 2vw, 20px);

  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--cell), 1fr));
  grid-auto-rows: var(--cell);
  grid-auto-flow: dense;
}

.card.small {
  aspect-ratio: 1;
  background: #8ed7e8;
}

.card.large {
  grid-column: span 2;
  grid-row: span 2;
  background: #efb1b1;
}