14 Februari 2025·9 menit baca

CSS Grid Modern & Container Queries

CSS Grid telah mengubah cara kita membangun layout web. Dikombinasikan dengan Container Queries, kita punya toolkit layout yang belum pernah sekuat ini.

grid-template-areas — Layout Visual

Salah satu fitur terbaik CSS Grid adalah kemampuan mendefinisikan layout secara visual menggunakan named areas. Ini cara paling intuitif untuk membuat layout kompleks seperti Holy Grail.

css·Holy Grail Layout

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 160px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 1rem;
}

.header { grid-area: header; }
.nav    { grid-area: nav;    }
.main   { grid-area: main;   }
.aside  { grid-area: aside;  }
.footer { grid-area: footer; }

/* Responsive di mobile */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Grid Adaptif dengan auto-fill

css·Auto-fill Grid

.card-grid {
  display: grid;
  /* Otomatis isi kolom sebanyak mungkin, minimal 280px */
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Container Queries — Game Changer

Container Queries memungkinkan komponen merespons ukuran container-nya, bukan ukuran viewport. Ini revolusioner untuk component-driven development dan sudah aman dipakai di production.

css·Container Queries

/* 1. Definisikan container */
.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

/* 2. Style berdasarkan ukuran CONTAINER, bukan viewport */
.card { flex-direction: column; }

@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 120px;
    flex-shrink: 0;
  }
}

🎯 Saran praktis: Mulai dengan Container Queries untuk semua komponen baru. Buat komponen yang tidak tahu di mana dia akan ditempatkan, dan biarkan CSS yang mengurus layoutnya.