home-page-grid (adjustment, concept)

by Константин Дралюк

HTML

<div class="home-page-grid">
  <div class="home-page-grid__card -small"></div>
  <div class="home-page-grid__card -medium"></div>
  <div class="home-page-grid__card -small"></div>
  <div class="home-page-grid__card -small"></div>
  <div class="home-page-grid__card -medium"></div>
  <div class="home-page-grid__card -small"></div>
  <div class="home-page-grid__card -large"></div>
</div>

SCSS

.home-page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(max-content, 15rem);
  gap: var(--legacy-spacing-16);
}
@media (min-width: 768px) {
  .home-page-grid .home-page-grid__card.-small {
    grid-column: span 2;
    grid-row: span 2;
  }
  .home-page-grid .home-page-grid__card.-medium,
  .home-page-grid .home-page-grid__card.-large {
    grid-column: span 4;
    grid-row: span 4;
  }
}
@media (min-width: 1024px) {
  .home-page-grid .home-page-grid__card.-small {
    grid-column: span 1;
    grid-row: span 1;
  }
  .home-page-grid .home-page-grid__card.-medium {
    grid-column: span 2;
    grid-row: span 2;
  }
  .home-page-grid .home-page-grid__card.-large {
    grid-column: span 4;
    grid-row: span 4;
  }
}
@media (min-width: 2560px) {
  .home-page-grid {
    grid-template-columns: repeat(8, 1fr);
  }
}
.home-page-grid__card {
  grid-column: span 4;
  grid-row: span 2;
  transition: opacity 0.1s ease;
  display: flex;
  border: 1px solid;
}
.metrics-card {
  width: 0;
  flex-grow: 1;
  border: 1px solid;
}
.metrics-card:before {
  content: '';
  display: block;
  padding-bottom: 38.75%;
}