40 - Layout 1

[jsartisan]

styles.css

.container {
  display: grid;
  gap: 0.5rem;
}

.item {
  background: #e1e1e1;
  height: 100px;
}

@media (width >= 400px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 600px) {
  .container {
    grid-template-columns: repeat(4, 1fr);
  }

  .item {
    grid-column: span 2;
  }

  .item:nth-child(1), .item:nth-child(6) {
    grid-column: span 4;
  }
}

@media (width >= 800px) {
  .item {
    grid-column: span 1;
  }

  .item:nth-child(1), .item:nth-child(6) {
    grid-column: span 2;
  }
}