Tutorial CSS / CSS Grid: repeat, auto-fit, auto-fill, dan Area Bernama

CSS Grid dapat mengulang track dengan repeat() dan menyesuaikan jumlah kolom dengan auto-fit atau auto-fill. Dua mode pengulangan otomatis ini berbeda dalam hal bagaimana mereka menangani track kosong; area bernama memberikan cara lain untuk mendeskripsikan wilayah halaman yang lebih besar.

Bandingkan pengulangan tetap dan otomatis

.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

repeat(3, ...) mendefinisikan tiga kolom terlepas dari jumlah kartu. Item keempat yang ditempatkan secara otomatis masuk ke baris berikutnya; itu tidak menambah jumlah kolom. Ini berbeda dari pengulangan otomatis, yang menghitung berapa banyak track yang muat. Lihat Dasar CSS Grid: Track, Garis, dan Penempatan Item.

.cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
}

auto-fit menghitung berapa banyak kolom yang akan muat dengan ukuran minimum yang ditentukan. Nilai pertama dari minmax adalah minimum, nilai kedua adalah maksimum, dan 1fr membagi ruang yang tersisa. Di sini min(100%, 192px) memastikan bahwa lebar kolom minimum tidak lebih besar dari induknya. Menetapkan minimum untuk kolom hanya menjadi 192px dapat menyebabkan bahkan satu kolom melampaui induknya ketika induknya lebih sempit dari 192px.

Untuk kontainer 800px, kolom minimum 192px, dan celah 16px, tiga kolom membutuhkan 608px, sementara empat membutuhkan 816px. Hanya tiga kolom yang muat. Perhitungan ini menentukan jumlah kolom; distribusi ruang bebas berikutnya menentukan lebar akhirnya. Teks panjang masih membutuhkan strategi pembungkus.

Bandingkan auto-fill dan auto-fit

Kedua nilai awalnya menghitung kolom berulang yang dapat masuk ke dalamnya. Perbedaan dengan auto-fit terletak pada proses meruntuhkan track berulang kosong setelah penempatan. Jika item mengisi semua kolom, kedua nilai mungkin terlihat mirip, jadi buat kontainer lebih lebar dan memiliki lebih sedikit kartu saat membandingkan. Bahkan ketika semua kartu muat dalam satu kolom di layar kecil, perbedaannya sulit dilihat. Lihat panduan repeat() dan pengulangan otomatis di MDN .

Pahami penempatan otomatis dan pengurutan padat

Item yang tidak menentukan posisi ditempatkan secara baris menurut grid-auto-flow: row default. Bahkan jika item sebelumnya menempati area yang besar dan menciptakan ruang kosong, penempatan default tidak kembali ke ruang kosong tersebut saat menempatkan item berikutnya. Perilaku default ini membuat pengurutan HTML dan progresi visual lebih mudah dipahami.

grid-auto-flow: row dense dapat mengisi ruang kosong di depan dengan item kecil di belakang. Meskipun ruang menjadi lebih sempit, urutan tampilannya di layar dan urutan DOM (Document Object Model) mungkin berbeda. Penempatan CSS tidak mengubah urutan HTML, jadi fokus keyboard dan urutan pembacaan harus dipertimbangkan bersama. Untuk langkah-langkah yang diberi nomor secara bermakna, catatan kronologis, dan entri formulir, mempertahankan urutan lebih penting daripada menghilangkan ruang kosong. Anda dapat memeriksa kondisi penempatan otomatis di deskripsi grid-auto-flow MDN.

Jalankan contoh pengulangan otomatis

Simpan contoh sebagai grid-auto-repeat.html. Bagian pertama memiliki dua kartu dalam sebuah kontainer dengan ukuran terbatas 800px. Bagian kedua menggunakan dua tautan yang membentang dua kolom dan dua yang membentang satu kolom, meninggalkan sebuah celah yang memungkinkan Anda membandingkan penempatan biasa dengan dense.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-auto-repeat.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 192px), 1fr));
 gap: 16px; width: min(100%, 800px); }
 .cards > div { min-width: 0; padding: 16px; background: #dceefa; overflow-wrap: anywhere; }
 .flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
 grid-auto-flow: row; max-width: 600px; margin-top: 16px; }
 .flow > a { padding: 12px; background: #e8f5de; }
 .flow > .wide { grid-column: span 2; }
  </style>
</head>
<body>
<h1>Comparing empty repeated columns</h1><div class="cards"><div>First card</div><div>Second card</div></div>
<h2>Default auto-placement</h2><div class="flow"><a class="wide" href="#result">1: two spaces</a><a class="wide" href="#result">2: two spaces</a><a href="#result">3: One space</a><a href="#result">4: one space</a></div>
<p id="result">This is the destination of the automatic-layout link.</p>
</body>
</html>

1. Pada layar lebar, jika bagian pertama berukuran 800px, kedua kartu dalam auto-fit akan mengambil masing-masing 392px. Mengganti hanya auto-fit dengan auto-fill mempertahankan tiga kolom, meninggalkan dua kolom pertama kartu sekitar 256px dan satu kolom kosong. Setelah dikonfirmasi, kembalikan ke auto-fit.
2. Salin lebih banyak div ke bagian pertama agar menjadi empat. Tiga kolom terisi dan kartu keempat ditempatkan di baris berikutnya. Dalam kondisi ini, tidak ada kolom berulang yang kosong, yang mengurangi perbedaan antara kedua nilai. Setelah latihan, kembalikan ke dua kartu asli.
3. Persempit layar untuk memastikan lebar induk kurang dari 192px. Berkat min(100%, 192px), satu kolom akan sesuai dengan induknya. Mengubah minimum menjadi hanya 192px dapat menyebabkan overflow di area yang lebih sempit. Setelah perbandingan, ekspresi asli dikembalikan.
4. Periksa ruang kosong setelah tautan 1 dan lokasi tautan 3 di .flow. Jika Anda hanya mengubah grid-auto-flow menjadi row dense, nomor 3 akan ditempatkan di ruang kosong sebelumnya. Dengan Tab, periksa apakah urutan 1 → 2 → 3 → 4 tetap terjaga. Kembali ke row setelah latihan.

Tentukan wilayah halaman dengan area yang diberi nama

Daripada menghitung nomor kolom dan baris secara terpisah, lebih mudah membaca maksud tata letak halaman dengan mengekspresikan bagian besar dengan nama seperti header·main·aside·footer. Setiap string dalam grid-template-areas adalah satu baris, dan nama-nama yang dipisahkan oleh spasi dalam string tersebut adalah sel. Nilai grid-area anak harus sesuai dengan namanya untuk masuk ke area tersebut. Cara mengubah konfigurasi kolom berdasarkan lebar layar dijelaskan dalam Media Query CSS dan Breakpoint Berdasarkan Konten.

Mengulangi nama yang sama di beberapa sel menciptakan satu area persegi panjang. Area tidak dapat berbentuk seperti L atau pulau terpisah. Setiap baris harus memiliki jumlah sel yang sama, dan sel yang dibiarkan kosong ditandai dengan titik (.). Jika deklarasi tidak valid, browser tidak akan mengikutinya, yang mungkin membuatnya terlihat seperti penempatan otomatis. Anda dapat memeriksa kondisi area yang valid dalam deskripsi grid-template-areas MDN.

Simpan kode di bawah sebagai grid-areas.html. Di desktop, teks utama dan informasi pendukung ditempatkan berdampingan, dan pada layar 640px atau lebih kecil, mereka berada dalam satu kolom. Sesuai dengan tata letak layar, urutan HTML tidak dibalik, tetapi teks utama muncul sebelum informasi tambahan.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-areas.html</title>
  <style>
* { box-sizing: border-box; }
body { margin: 16px; font: 16px/1.6 sans-serif; color: #243447; }
h1 { font-size: 24px; } h2 { font-size: 20px; margin-top: 32px; }
a { color: #145f8f; } a:focus-visible { outline: 3px solid #b4470b; outline-offset: 3px; }
.page { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
 grid-template-areas: "header header" "main aside" "footer footer"; gap: 16px; max-width: 1000px; }
 .page > * { min-width: 0; padding: 20px; background: #dceefa; overflow-wrap: anywhere; }
 header { grid-area: header; } main { grid-area: main; } aside { grid-area: aside; } footer { grid-area: footer; }
 @media (max-width: 640px) {
 .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main" "aside" "footer"; }
 }
  </style>
</head>
<body>
<h1>Page area names</h1><div class="page"><header>Site title</header><main><h2>Main content</h2><p>This is the main content area. The HTML order keeps it first on mobile, too.</p></main><aside>Related information</aside><footer>Contact and site information</footer></div>
</body>
</html>

1. Pastikan header dan footer menempati dua kolom di layar lebar. Jika Anda memperkecil layar hingga 640px atau kurang, urutannya akan menjadi header → main → aside → footer dalam satu kolom. Lihat mengapa Anda perlu mengubah definisi kolom dan string area bersamaan.
2. Ubah hanya grid-area dari aside ke nama yang berbeda. Koneksi antara area aside yang dipesan di template dan elemen sebenarnya mungkin terputus dan tidak ditempatkan di slot yang dimaksud. Kembalikan namanya menjadi aside.
3. Jika Anda hanya mengubah template layar lebar menjadi "header header" "header aside" "footer footer", nama header membentuk pola L yang tidak valid sehingga deklarasi grid-template-areas diabaikan. Setelah memeriksa aplikasi di Developer Tools, tiga string asli dikembalikan.

Dalam praktiknya, lebih mudah untuk dipelihara jika Anda memisahkan area untuk membuat kolom berdasarkan jumlah kartu dan area untuk memberi nama bagian halaman. Pengulangan otomatis menentukan jumlah dan lebar minimum, sementara nama wilayah menentukan struktur halaman dan titik transisi. Sebelum mencoba memaksa keduanya menjadi satu aturan, tentukan masalah apa yang setiap wadah coba selesaikan.