Dasar-dasar grid

grid-template-columns: repeat(3, 1fr) membuat tiga kolom sama lebar dalam satu baris kode, dan browser menaruh setiap anak ke sel kosong berikutnya.

Baris dan kolom sekaligus

Grid, modul CSS Grid Layout, dibuat untuk tata letak dua dimensi: baris dan kolom bersamaan. Kamu menggambar grid pada wadah, lalu item-item jatuh ke dalam selnya. Kalau flexbox berangkat dari item dan membiarkannya menentukan ukuran sendiri, grid berangkat dari tata letak lalu memasukkan item ke dalamnya. Karena itu grid adalah alat yang wajar untuk galeri foto, daftar kartu, dan bentuk keseluruhan halaman dengan kepala, bilah samping, konten utama, dan kaki.

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* three equal columns */
  gap: 10px;
}
.gallery .wide { grid-column: span 2; }    /* this item covers two columns */

Track dan satuan fr

grid-template-columns mendaftar lebar setiap kolom, yang disebut track. Kamu bisa memakai panjang apa pun, seperti 200px 1fr, tetapi grid menambahkan satuannya sendiri: fr, satu bagian dari ruang kosong. 1fr 1fr 1fr membuat tiga kolom sama lebar; 2fr 1fr membuat kolom pertama dua kali selebar kolom kedua. Satuan fr hanya membagikan ruang yang tersisa sesudah track tetap dan celah, jadi 200px 1fr memberi bilah samping 200 piksel dan membiarkan kolom utama mengambil sisanya. repeat(3, 1fr) adalah cara yang lebih singkat untuk menulis 1fr 1fr 1fr. grid-template-rows melakukan hal yang sama untuk baris, tetapi sering kali baris dibiarkan saja agar setinggi kontennya.

Menempatkan item

Secara bawaan, item mengisi grid sesuai urutan di sumber, satu sel masing-masing, dari kiri ke kanan lalu ke baris berikutnya. Untuk membuat item lebih besar, grid-column: span 2 membuatnya menutupi dua kolom, dan grid-row: span 2 dua baris. Garis di antara track diberi nomor mulai dari 1, jadi grid tiga kolom punya garis 1 sampai 4, dan grid-column: 1 / 3 berarti dari garis 1 sampai garis 3. grid-column: 1 / -1 merentangkan item selebar penuh, karena angka negatif dihitung dari ujung.

Memberi nama area

Untuk tata letak halaman, grid-template-areas memungkinkanmu menggambar tata letak dengan kata-kata. Setiap string bertanda kutip adalah satu baris dan setiap kata adalah satu sel; mengulang sebuah kata membuat area membentang di sel-sel itu. Lalu setiap item diberi grid-area dengan nama yang cocok. Tata letak di bawah hampir terbaca seperti sketsa: kepala melintang di atas, bilah samping dan konten utama berdampingan, dan kaki di bawah. Mengubah tata letak untuk ponsel cukup dengan menulis ulang beberapa string ini, sering kali di dalam media query.

.page {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-areas:
    "head head"
    "side main"
    "foot foot";
  gap: 16px;
}
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

Kolom yang menyesuaikan layar

Satu pola dari panduan grid MDN layak dihafal: grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)). minmax(150px, 1fr) menyatakan setiap kolom paling sedikit 150 piksel dan boleh membesar untuk berbagi ruang, dan auto-fill membuat kolom sebanyak yang muat. Hasilnya galeri yang menampilkan dua kolom di ponsel dan lima atau enam di layar lebar, lagi-lagi tanpa media query. Seperti flexbox, grid bisa menaruh item dengan urutan yang berbeda dari HTML, dan peringatan yang sama berlaku: samakan urutan baca dengan urutan tampilan.