Bagaimana anda membuat susun atur dengan CSS Grid?

Question

Accepted Answer

**CSS Grid** ialah sistem susun atur dua dimensi — ia mengawal **baris dan lajur serentak**, tidak seperti baris tunggal Flexbox. Anda menentukan grid pada bekas dan meletakkan item ke dalamnya.

```css
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr; /* 3 columns: fixed, then two flexible */
  grid-template-rows: auto 1fr auto;     /* 3 rows */
  gap: 1rem;                              /* gutters between cells */
}
```

## Unit fr dan repeat()

```css
grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
grid-template-columns: 1fr 2fr;          /* 2nd column is twice the 1st */
```

`fr` ("fraction") mengagihkan ruang yang ada — `1fr 2fr` membahagikannya 1:2. `repeat(3, 1fr)` ialah ringkasan untuk tiga trek yang sama.

## Grid responsif TANPA media query

```css
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}
```

Satu baris ini mencipta grid kad yang sepenuhnya responsif: setiap lajur sekurang-kurangnya `250px`; pelayar memuatkan **sebanyak mungkin** setiap baris dan membalut selebihnya — secara automatik beralih daripada 4 lajur pada desktop kepada 1 pada mudah alih. `auto-fit` + `minmax` ialah salah satu corak Grid yang paling digemari.

## Meletakkan item merentasi sel

```css
.hero {
  grid-column: 1 / 3;  /* span from column line 1 to 3 (two columns) */
  grid-row: 1 / 2;
}
.featured { grid-column: span 2; } /* span 2 columns from its position */
```

Item boleh merentangi berbilang baris/lajur, membolehkan susun atur gaya majalah yang janggal dengan Flexbox.

## Grid lawan Flexbox

- **Grid** — susun atur 2D (baris *dan* lajur): susun atur halaman, grid kad, papan pemuka.
- **Flexbox** — susun atur 1D (satu baris atau lajur tunggal): bar navigasi, kumpulan butang, pemusatan.

Keduanya bergabung dengan baik — sel grid boleh menjadi bekas flex tersendiri.

## Mengapa ia penting

Grid ialah alat susun atur CSS paling berkuasa — ia mengendalikan susun atur halaman penuh dan grid kad responsif dengan kemas, selalunya menggantikan helah nested-div.

Corak responsif `auto-fit`/`minmax` sahaja menghapuskan keperluan untuk banyak media query.