Tutorial CSS / Dasar CSS Grid: Track, Garis, dan Penempatan Item

CSS Grid mendefinisikan baris dan kolom untuk tata letak dua dimensi dan menempatkan item anak langsung ke dalam grid tersebut. Garis grid membatasi track dan sel; sebuah item dapat membentang di beberapa track tanpa mengubah urutan dokumen.

Identifikasi kontainer, garis, track, sel, dan area

Sebuah kontainer Grid adalah elemen induk yang menerapkan display: grid, dan item Grid adalah anak langsung dari induk tersebut. Anak-anak di dalam anak pertama bukanlah item yang berdiri sendiri dalam grid luar. Menggambar grid di CSS tidak membuat elemen HTML baru; itu hanya mengubah cara kita menghitung posisi setiap anak di grid.

Nomor garis berbeda dari nomor kolom. Dua kolom dibatasi tiga garis vertikal bernomor 1, 2, dan 3. Item yang membentang dari garis 1 sampai garis 3 menempati kedua kolom. gap adalah jarak antara track dan dihitung terpisah dari padding atau border item. Mudah untuk melihat nomor garis dan area sebenarnya dengan mengaktifkan tampilan grid di panel Elements pada Alat Pengembang. Konsep dasar Grid MDN merangkum istilah dan operasi dasar.

Tentukan kolom dengan px, persentase, dan fr

.grid {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
}

Kode parsial ini dapat dibandingkan dengan mengganti deklarasi kolom dalam aturan .grid dari contoh lengkap. Kolom pertama menggunakan 160px, dan kolom kedua menggunakan sisa ruang. fr adalah pecahan, yang membagi sisa ruang berdasarkan rasio setelah mempertimbangkan track dan celah lainnya. Membekukan kolom pertama tanpa memperhatikan konten dapat membuat badan terlalu sempit untuk layar sempit, jadi nilai ini harus ditentukan berdasarkan konten yang sebenarnya.

Dalam wadah dengan lebar 640px, jika celahnya 16px dan dua kolomnya adalah 1fr·2fr, ruang yang harus didistribusikan adalah 624px. Jika tidak ada batas ukuran minimum, kolom pertama adalah 208px dan kolom kedua adalah 416px. Contoh lengkap menggunakan minmax(0, 1fr) minmax(0, 2fr) untuk memastikan bahwa lebar minimum track tidak tetap signifikan karena kontennya.

Jika Anda menggunakan 50% 50% dan gap: 16px bersamaan, lebar kontainer mungkin sudah terisi hanya dengan kolom-kolom, lalu gap dapat ditambahkan hingga meluap. Untuk aliran kolom yang sama, fr itu mudah. Ini tidak berarti Anda harus membuat semua kolom dengan rasio yang sama. Daftar Anda mungkin perlu memiliki kolom nama yang kecil dan kolom deskripsi yang besar, dan Anda mungkin juga ingin menggunakan kombinasi kolom tetap dan fleksibel.

Bandingkan baris eksplisit dan implisit

grid-template-rows: 80px secara eksplisit mendefinisikan satu baris pertama. Jika tidak ada cukup baris untuk menempatkan item di belakang, baris implisit dibuat, dan ukurannya dapat disesuaikan dengan grid-auto-rows. Membuat dua kolom tidak membatasi Anda hanya pada dua baris.

Gunakan baris tetap ketika ada persyaratan ukuran yang jelas, tetapi biarkan kartu penjelasan menampung baris tambahan dari terjemahan atau teks yang diperbesar. minmax(100px, auto) menetapkan minimum dan memungkinkan pertumbuhan; itu tidak mengharuskan semua baris memiliki tinggi yang sama. Setiap baris bergantung pada isi dan kondisi tata letaknya. Untuk keterangan lebih lanjut, lihat MDN: ukuran baris implisit dengan grid-auto-rows .

Tempatkan item dengan garis dan rentang

.feature {
  grid-column: 1 / -1;
}
/* Different representations spanning two columns in the same two-column explicit grid */
/* .feature { grid-column: span 2; } */

1 / -1 berarti dari garis pertama hingga garis terakhir pada grid eksplisit. Ini cocok untuk judul atau area yang disorot yang mengambil seluruh lebar grid, baik itu dua kolom atau satu kolom. Nomor garis negatif dihitung relatif terhadap akhir grid eksplisit dan tidak mewakili akhir dari semua track yang dihasilkan secara otomatis. Cara menyesuaikan jumlah dan ukuran minimum kolom yang berulang dibahas dalam CSS Grid: repeat, auto-fit, auto-fill, dan Area Bernama.

span 2 berarti mengambil dua track, dan jika Anda tidak menentukan garis awal yang tepat, penempatan otomatis akan menentukan posisi. Di ponsel, jika Anda hanya memiliki satu kolom dan tetap menggunakan span 2, Anda mungkin membuat kolom tambahan yang tidak diinginkan. Jika Anda ingin mempertahankan lebar penuh, gunakan 1 / -1 atau tentukan ulang nilai span di ponsel. Ketika Anda meminimalkan spesifikasi penempatan, item yang tersisa akan default ke sel kosong sesuai urutan HTML.

Jalankan contoh Grid lengkap

Simpan kode di bawah ini sebagai grid-basics.html dan buka. Pada tata letak dua kolom, A dan B ditempatkan di baris tetap pertama, C ditempatkan di baris implisit yang mencakup kedua kolom, dan D serta E ditempatkan di baris otomatis berikutnya. Pada lebar viewport 480px atau kurang, kolom berubah menjadi satu dan C tetap mengambil lebar penuh.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-basics.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; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
 grid-template-rows: 80px; grid-auto-rows: minmax(100px, auto); gap: 16px;
 width: min(100%, 640px); }
 .grid > div { min-width: 0; padding: 12px; background: #dceefa; overflow-wrap: anywhere; }
 .feature { grid-column: 1 / -1; }
 @media (max-width: 480px) { .grid { grid-template-columns: minmax(0, 1fr); } }
  </style>
</head>
<body>
<h1>Column proportions and row heights</h1>
<div class="grid"><div>A: first row</div><div>B: first row</div><div class="feature">C: Area that occupies two columns. As the content grows, the height of this auto-row also increases.</div><div>D: next line</div><div>E: This card has a long description. The height you need will vary depending on the length of your content. Instead of forcing all content to fit at a fixed height, set it to accommodate content beyond the minimum height.</div></div>
</body>
</html>

1. Pada layar lebar, pastikan lebar .grid adalah 640px dan aktifkan Tampilkan Grid di Alat Pengembang. Kolom-kolomnya berukuran 208px·416px, dan jarak di antara mereka adalah 16px. Jika Anda mengubah rasio kolom menjadi 1fr·1fr, masing-masing menjadi 312px. Setelah dibandingkan, dikembalikan ke 1fr·2fr.
2. Baris pertama memiliki tinggi 80px. Jika Anda menambahkan beberapa baris teks di dalam A, tinggi baris itu sendiri akan tetap sama dan kontennya mungkin meluap. Jika Anda mengembalikan teks ke keadaan semula dan mengubah grid-template-rows menjadi minmax(80px, auto), ia dapat tumbuh tergantung kontennya.
3. Tambahkan cukup banyak isi pada C. Karena grid-auto-rows bernilai minmax(100px, auto), tinggi baris dapat melebihi 100px. Ubah hanya grid-auto-rows menjadi 100px dan perhatikan perbedaan pada baris tetap, kemudian kembalikan ke nilai aslinya.
4. Jika Anda hanya menghapus deklarasi grid-column dari C, C akan ditempatkan dalam satu sel dan posisi item di belakangnya juga akan berubah. Kembalikan ke 1/-1 lagi. Persempit viewport menjadi 480px atau kurang untuk melihat apakah spesifikasi lebar keseluruhan tetap terjaga dalam 1 kolom.

Tangani konten panjang pada layar sempit

Track 1fr pada Grid dapat meluas karena string panjang akibat ukuran minimum otomatis bawaan. minmax(0, 1fr) adalah metode untuk menetapkan ukuran minimum track menjadi 0, dan pemisahan baris sebenarnya dalam string membutuhkan aturan terpisah. min-width: 0 juga diterapkan pada item itu sendiri tergantung situasinya. Simpan kode berikut sebagai grid-long-text.html. Jika item meluap melewati kolom, periksa Overflow CSS, Pembungkusan Teks Panjang, dan Elipsis untuk aturan pembungkusan baris string panjang.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>grid-long-text.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; }
.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px;
 width: min(100%, 600px); }
 .grid > div { padding: 12px; background: #e8f5de; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>Grid minimum size and long strings</h1><div class="grid"><div>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</div><div>A description of ordinary length</div></div>
</body>
</html>

1. Ubah hanya overflow-wrap menjadi normal untuk memastikan bahwa huruf dapat meluap meskipun lebar track dipertahankan.
2. Jika Anda mengganti kedua kolom dengan 1fr 1fr, Anda dapat melihat bagaimana ukuran minimum dari string panjang memengaruhi distribusi kolom. Setelah membandingkan, kita mengembalikan keduanya ke minmax(0, 1fr) dan anywhere.

Pilih titik transisi responsif berdasarkan lebar bacaan aktual dari konten, bukan nama perangkat. Angka 480px dalam contoh ini adalah pilihan pembelajaran dan bukan standar untuk semua Grid. Anda dapat mempersempit layar dan memperbesar teks untuk mengamati baris dengan tinggi tetap, string panjang, dan kolom tambahan yang dibuat oleh span untuk membantu Anda mengisolasi penyebab overflow.