Menggabungkan Flexbox dan Grid
Gunakan Grid untuk tata letak halaman secara keseluruhan dan Flexbox untuk penyelarasan tingkat komponen, serta pahami kapan setiap alat merupakan pilihan yang tepat.
Menggabungkan Flexbox dan Grid adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Keduanya adalah Alat yang Saling Melengkapi
Flexbox dan Grid bukanlah pesaing — keduanya dirancang untuk digunakan bersama. Pola yang umum: gunakan CSS Grid untuk struktur makro halaman, lalu gunakan Flexbox di dalam setiap area grid untuk menata isi komponen.
Tata Letak Halaman dengan Grid, Komponen dengan Flex
Tentukan kerangka halaman tingkat tinggi dengan Grid. Di dalam setiap area grid, gunakan Flexbox untuk penataan tingkat komponen: tautan navigasi dalam satu baris, konten kartu dalam satu kolom.
/* Page skeleton */
body {
display: grid;
grid-template-areas: 'header' 'main' 'footer';
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
/* Component inside grid area */
header {
display: flex;
justify-content: space-between;
align-items: center;
}Pola Kisi Kartu
Pola klasik: Grid untuk tata letak kartu, Flex untuk tata letak bagian dalam setiap kartu. Dengan demikian, kartu tersusun rapi pada kisi, sementara bagian dalamnya (gambar, judul, isi, footer) tersusun secara tepat.
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.card {
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
}
.card-body { flex: 1; } /* push footer down */Pola Bilah Navigasi
Bilah navigasi yang umum menggabungkan keduanya. Bilah navigasi itu sendiri adalah kontainer flex untuk logo dan tautan. Bagian tautan dapat menjadi kontainer flex lainnya. Menu besar dapat menggunakan Grid untuk tata letak beberapa kolom.
Tata Letak Holy Grail
Tata letak 'Holy Grail' (header, bagian tengah tiga kolom, footer) kini dapat dibuat dengan mudah menggunakan Grid. Tiga kolom — bilah sisi kiri, konten utama, bilah sisi kanan — adalah kolom Grid; konten di dalam masing-masing kolom menggunakan Flexbox.
.page {
display: grid;
grid-template:
'header header header' auto
'left main right' 1fr
'footer footer footer' auto
/ 200px 1fr 200px;
min-height: 100vh;
}Memusatkan Apa Pun — Grid atau Flex
Grid dan Flexbox sama-sama dapat memusatkan konten dengan sempurna. Grid: place-items: center (singkatan dari align-items + justify-items). Flex: justify-content: center; align-items: center.
.center-grid {
display: grid;
place-items: center; /* centers both axes */
min-height: 100vh;
}
.center-flex {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Tata Letak Bilah Sisi Responsif
Seluler: satu kolom (navigasi di atas). Tablet ke atas: bilah sisi dan konten berdampingan. Grid membuatnya deklaratif — ubah template-areas dalam kueri media.
Pola Ikon + Teks
Tata letak mikro yang sangat umum: ikon di samping teks. Flexbox sangat cocok untuk ini karena bentuknya satu baris dengan penyelarasan.
.alert {
display: flex;
align-items: flex-start;
gap: 12px;
}
.alert-icon { flex-shrink: 0; width: 20px; }
.alert-body { flex: 1; }Kapan Memilih Salah Satunya
Grid ketika: Anda berpikir dalam baris DAN kolom, memerlukan item yang sejajar di seluruh track, atau sedang membuat kerangka halaman. Flex ketika: Anda berpikir dalam satu arah, item harus dapat menyusut dan membesar, atau Anda sedang menata deretan tombol atau tumpukan item.
Jangan Terlalu Rumit
Terkadang elemen blok sederhana dengan max-width dan margin: auto lebih baik daripada kisi yang kompleks. Tidak setiap tata letak memerlukan Grid. Gunakan alat paling sederhana yang dapat menyelesaikan tugas.
Menelusuri Masalah Tata Letak
Di DevTools: klik lencana grid/flex pada panel Elements untuk menampilkan garis kisi atau kerangka item flex. Dengan begitu, struktur tata letak yang tidak terlihat menjadi tampak dan sangat membantu dalam mendiagnosis ketidakselarasan.
Pemeriksaan Cepat
Kombinasi alat tata letak apa yang paling umum digunakan masing-masing untuk tata letak tingkat halaman dan tingkat komponen?
Rangkuman: Menggabungkan Grid dan Flex
Grid dan Flexbox saling melengkapi. Gunakan Grid untuk struktur halaman dua dimensi. Gunakan Flexbox untuk bagian dalam komponen satu dimensi. place-items: center pada grid memusatkan semuanya. flex-direction: column + flex: 1 pada isi kartu mendorong footer kartu ke bawah. Telusuri masalah dengan lencana hamparan DevTools.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menggabungkan Flexbox dan Grid” gratis?
Ya — teks lengkap “Menggabungkan Flexbox dan Grid” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menggabungkan Flexbox dan Grid”?
Gunakan Grid untuk tata letak halaman secara keseluruhan dan Flexbox untuk penyelarasan tingkat komponen, serta pahami kapan setiap alat merupakan pilihan yang tepat. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Frontend Academy?
Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.
Berapa lama pelajaran “Menggabungkan Flexbox dan Grid” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?
Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Pendalaman Flexbox: Perataan, Pembungkusan, Urutan
- CSS Grid: template-areas, auto-fit, minmax
- Menggabungkan Flexbox dan Grid
- Variabel CSS untuk Tema