CSS Grid dalam Praktik Tata letak yang berguna tanpa kerangka kerja

Flexbox atau Grid? Gunakan keduanya. Flexbox mengelola satu sumbu — baris atau kolom. CSS Grid mengelola kedua sumbu sekaligus. Perbedaan ini mengarahkan setiap keputusan tata letak yang akan Anda buat.

Properti yang benar-benar penting

Anda dapat membangun hampir setiap tata letak yang akan Anda temui dengan lima properti: grid-template-columns, grid-template-rows, gap, grid-areadan place-items. Berikut ini adalah kartu yang terpusat dalam enam baris:

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

place-items: center adalah singkatan dari align-items + justify-items. Satu baris, konten yang sempurna terpusat, tanpa perhitungan yang diperlukan.

Satuan fr: berhenti berpikir dalam persentase

Persentase tidak memperhitungkan jarak antar sel. fr (satuan fraksional) mendistribusikan ruang yang tersisa setelah nilai tetap ditempatkan. Ini adalah grid 12 kolom standar: Setiap

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Span 4 of 12 columns */
.col-4 {
  grid-column: span 4;
}

/* Span 8 of 12 columns */
.col-8 {
  grid-column: span 8;
}

mendapatkan bagian yang sama dari ruang yang tersisa setelah jarak dikurangi. Tiga kolom dengan 1fr tidak akan meluapkan kontainer — sesuatu repeat(3, 1fr) dapat salah ketika jarak terlibat. 33.33% Pengisian otomatis vs penyesuaian otomatis: grid responsif tanpa kueri media

Kata kunci kedua membiarkan browser memutuskan berapa banyak kolom yang sesuai. Perbedaan muncul ketika jumlah item kurang dari kapasitas grid.

pengisian otomatis

menjaga jalur kolom yang kosong. penyesuaian otomatis menghancurkan jalur tersebut, membiarkan item yang ada memanjang untuk mengisi baris. Untuk grid kartu, Anda hampir selalu ingin Itu adalah grid kartu yang sepenuhnya responsif. Tidak ada titik balik. Setiap kartu minimal lebar 280px, dan browser menyesuaikan sebanyak mungkin per baris. Ketika ukuran viewport berkurang di bawah 280px, ia berubah menjadi satu kolom. Gunakan auto-fill:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

jika Anda ingin tiga kartu pada layar lebar masing-masing memanjang dan mengisi baris, bukan duduk di kolom lebar tetap dengan ruang kosong di sampingnya. auto-fit Pembuatan tata letak semacam ini secara manual membutuhkan waktu. Sebuah

generator grid CSS online memungkinkan Anda mengatur kolom, baris, dan jarak secara visual sebelum menulis satu baris — layak untuk dua menit yang disimpan saat memperbaiki perhitungan kolom. Area bernama: tata letak yang dapat dibaca

Area grid menggantikan perhitungan angka posisi dengan nama yang mudah dibaca. Tata letak yang paling jelas — header, sidebar, konten utama, dan footer — adalah salah satu contoh terbaik:

string adalah peta visual dari tata letak Anda. Titik (

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
  gap: 1rem;
}

.page-header  { grid-area: header; }
.page-sidebar { grid-area: sidebar; }
.page-main    { grid-area: main; }
.page-footer  { grid-area: footer; }

Itu grid-template-areas ) menandai sel yang kosong. Ubah bagian dengan mengubah string — tidak perlu menghitung nomor baris..Tata letak umum di bawah 10 baris

Setelah Anda memiliki dasar-dasarnya, kebanyakan pola yang sering muncul dapat dikurangi hanya ke beberapa baris.

Sidebar + konten:

Bagian yang ditumpuk dengan ritme vertikal yang konsisten:

.layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
}

Grid ikon yang otomatis menyesuaikan:

.page-sections {
  display: grid;
  gap: 4rem;
}

Inspektornya di Chrome DevTools

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 1rem;
}

Buka DevTools, pilih kontainer grid mana pun di panel Elements, dan cari

grid badge di samping elemen tersebut. Klik untuk mengaktifkan lapisan grid — Anda mendapatkan visualisasi dari setiap kolom, baris, dan jarak yang digambar secara langsung di halaman. Di panel

Layout yang berada di samping Computed dan Styles, Anda dapat mengontrol apa yang ditampilkan oleh lapisan tersebut: nomor baris, nama baris, nama area, dan garis yang diperluas melebihi batas grid. Ketika tata letak gagal, mengaktifkan nomor baris sambil memperhatikan lapisan tersebut biasanya mengungkapkan jalur yang tidak sesuai secara langsung — jauh lebih cepat daripada membaca nilai-nilai mentah di panel Styles. Kebiasaan praktis: bangun struktur terlebih dahulu di DevTools, lalu komit nilai-nilainya ke stylesheet setelah tata letak grid terlihat benar. grid-column Apa yang masih ditinggalkan oleh Grid untuk Flexbox

Grid adalah pilihan yang tepat untuk struktur dua dimensi: bagian halaman, susunan kartu, dashboard kompleks. Flexbox tetap lebih baik untuk aliran satu dimensi — tautan navigasi yang melintasi, kelompok tombol, input formulir dengan label inline, dan di mana saja Anda ingin item tumbuh atau menyusut berdasarkan konten mereka, bukan berdasarkan jalur yang ditentukan.

Dalam praktiknya, Anda akan menggunakan Grid untuk tata letak luar dan Flexbox untuk komponen di dalamnya. Keduanya bekerja dengan baik; pilih yang sesuai dengan sumbu masalah.

CSS Grid dalam Praktik: Tata Letak yang Berguna Tanpa Framework 2

CSS Grid dalam Praktik: Tata Letak yang Berguna Tanpa Framework 1

Anda mungkin juga menyukai