Responsive Grid dengan CSS Grid

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* Variant: masonry-like with auto rows */
.auto-grid--masonry {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: 10px;
  gap: 1rem;
}

.auto-grid--masonry .item {
  grid-row-end: span var(--rows, 20);
}

/* Variant: sidebar + content */
.layout-sidebar {
  display: grid;
  grid-template-columns: minmax(240px, 300px) 1fr;
  gap: 2rem;
}

@media (max-width: 768px) {
  .layout-sidebar {
    grid-template-columns: 1fr;
  }
}