Pemahaman yang kuat tentang Flexbox dan CSS Grid diperlukan jika Anda ingin membangun situs web yang menakjubkan dan responsif.
Jika Anda telah menulis CSS untuk waktu yang lama, kemungkinan besar Anda setidaknya pernah mendengar istilah ini. Anda bahkan mungkin telah menggunakan salah satu atau keduanya sampai taraf tertentu. Keduanya merupakan bagian kuat dari CSS, dengan kasus penggunaan yang serupa namun sedikit berbeda.
Apa itu Flexbox?
Flexbox adalah metode tata letak CSS satu dimensi yang sudah ada sejak lama. Anda dapat menganggap Flexbox sebagai sekumpulan properti CSS terkait yang dapat Anda gunakan untuk menyelaraskan elemen HTML dalam wadah dan mengelola ruang di antaranya.
Sebelum Flexbox, jenis tata letak ini membutuhkan penggunaan float dan properti posisi.
Jika Anda khawatir tentang dukungan browser untuk Flexbox, jangan khawatir. Berdasarkan caniuse.com, semua browser modern mendukung Flexbox.
Dasar-dasar Flexbox
Ketika Flexbox menyertakan banyak properti CSS, dasar-dasarnya cukup sederhana. Menggunakan Flexbox selalu dimulai dengan mendeklarasikan wadah induk sebagai wadah fleksibel dengan menambahkan
tampilan: fleksibel dengan aturan gayanya. Melakukan hal ini secara otomatis membuat semua turunan dari elemen ini menjadi item fleksibel.Setelah itu, Anda dapat mengontrol distribusi ruang di dalam wadah fleksibel menggunakan membenarkan-konten properti. Anda dapat mengontrol perataan item fleksibel dengan menyelaraskan-item Properti.
Berikut adalah contoh kode yang menggunakan Flexbox untuk menyebarkan ruang dalam wadah secara merata di antara turunannya, dan menyelaraskan semuanya di tengah wadah. Ini adalah HTML-nya:
<kelas div="wadah">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>Ini CSSnya:
.wadah {
tampilan: fleksibel;
lebar: 100%;
justify-content: space-around;
menyelaraskan-item: tengah;
batas: 1px hitam pekat;
tinggi: 200px;
}
.wadah > div {
tinggi: 100px;
lebar: 100px;
background-color: merah;
warna putih;
ukuran font: 5rem;
perataan teks: tengah;
border-radius: 5px;
}
Dan inilah hasilnya:
Apa itu Kotak CSS?
CSS Grid adalah sistem tata letak yang melengkapi Flexbox. Flexbox sangat kuat, tetapi tidak terlalu cocok untuk jenis tata letak tertentu. Mencoba menata struktur seluruh halaman dengan Flexbox akan menjadi tugas yang membuat frustrasi karena melibatkan markup non-sematik yang jelek dan CSS yang retas.
CSS Grid bukanlah pengganti Flexbox, melainkan sistem alternatif untuk beberapa situasi.
Dukungan untuk CSS Grid tidak seluas Flexbox, tetapi Grid didukung dengan cukup baik pada tahun 2022.
Dasar-dasar Kotak CSS
Konsep Grid itu sederhana. Seperti namanya, CSS Grid memungkinkan Anda membagi ruang dalam wadah induk menjadi kisi baris dan kolom, dengan sejumlah baris/kolom yang Anda suka. Setelah itu, Anda menentukan posisi item anak dengan mereferensikan garis kisi induk.
Mulailah dengan menambahkan tampilan: kisi ke wadah induk. Kemudian gunakan grid-template-rows Dan grid-template-columns properti untuk menentukan baris dan kolom yang ingin Anda pisahkan kisi-kisinya. Anda kemudian dapat menggunakan kotak-kolom Dan baris kisi properti pada elemen anak untuk memberi tahu mereka di mana mereka seharusnya berada di grid. Mari kita lihat contoh Grid yang menggunakan pengaturan lima elemen dari sebelumnya, tetapi dalam pengaturan yang lebih rumit.
Berikut HTML-nya:
<kelas div="wadah">
<div>1</div>
<kelas div="dua">2</div>
<kelas div="tiga">3</div>
<kelas div="empat">4</div>
<kelas div="lima">5</div>
</div>Berikut CSSnya:
.wadah {
tampilan: kisi;
lebar: 100%;
grid-template-rows: ulangi (3, 1fr);
kisi-templat-kolom: ulangi (3, 1fr);
celah: 0.5rem;
batas: 1px hitam pekat;
tinggi: 300px;
}.wadah > div {
background-color: merah;
warna putih;
ukuran font: 5rem;
perataan teks: tengah;
border-radius: 5px;
}
.wadah > .dua {
baris-kisi: 2;
kolom-kisi: 2;
}
Inilah hasilnya:
CSS Grid juga mencakup banyak hal properti lain yang dapat Anda gunakan untuk membangun tata letak yang lebih kompleks.
Mana Yang Harus Anda Gunakan?
Pertama, penting untuk diperhatikan bahwa tidak ada yang menghentikan Anda untuk menggunakan Flexbox dan Grid secara bersamaan, dan dalam beberapa kasus, itulah pilihan yang optimal. Yang mengatakan, mari kita jawab pertanyaan tata letak mana yang paling cocok untuk diterapkan oleh masing-masing sistem ini.
Flexbox paling cocok untuk membangun tata letak yang melibatkan penyelarasan dan pendistribusian elemen pada satu baris. Contoh tata letak semacam ini adalah menyelaraskan ikon di akhir bagian, atau mengatur tautan di bilah navigasi.
Kisi, di sisi lain, bersinar paling terang saat Anda harus memposisikan elemen dengan tepat relatif terhadap yang lain (baik secara horizontal maupun vertikal), dan Anda memerlukan pemosisian ini agar mudah beradaptasi dengan berbagai ukuran layar.
Untuk mendemonstrasikan, inilah kode yang perlu Anda tulis untuk membuat ulang tata letak dari contoh Grid dengan Flexbox.
HTML:
<kelas div="wadah">
<kelas div="sub satu">
<div>1</div>
<div>5</div>
</div><kelas div="sub dua">
<div>2</div>
</div>
<kelas div="sub tiga">
<div>4</div>
<div>3</div>
</div>
</div>
CSS:
.wadah {
batas: 1px hitam pekat;
tinggi: 300px;
}.sub {
tampilan: fleksibel;
lebar: 100%;
}.satu, .tiga {
membenarkan-konten: ruang-antara
}.dua {
justify-content: center;
}
.sub > div {
tinggi: 100px;
lebar: 100px;
background-color: merah;
warna putih;
ukuran font: 5rem;
perataan teks: tengah;
border-radius: 5px;
}
Dan inilah hasilnya:
Hal utama yang perlu diperhatikan di sini adalah meskipun kode ini menghasilkan output yang sama dengan contoh Grid, markup di sini jauh lebih rumit. Menerapkan tata letak ini memerlukan sub-kontainer, dan Anda harus menempatkan div bernomor yang tidak berurutan di markup.
Selanjutnya, asumsikan Anda perlu mengubah tata letak ini ke posisi yang canggung: katakanlah menyelaraskan div ke-5 dengan ke-2. Jika Anda menggunakan Flexbox untuk ini, Anda harus menggunakan posisi: relatif atau sesuatu yang serupa. Menggunakan Grid, yang Anda butuhkan hanyalah menggeser kotak-kolom Properti.
Namun, sebaliknya, menerapkan penyelarasan garis tunggal sederhana dari contoh Flexbox dengan Grid akan menghasilkan lebih banyak CSS. Grid jelas kurang cocok untuk tata letak semacam itu.
Meskipun Flexbox dan Grid sebagian besar dapat mereplikasi efek satu sama lain, ada beberapa pengecualian. Membuat elemen tumpang tindih cukup sulit hanya dengan Flexbox tetapi sangat mudah dengan Grid. Grid juga tidak mengizinkan elemen untuk menjauh dari elemen lain dengan margin: otomatis seperti yang dilakukan Flexbox.
Flexbox dan Grid Adalah Sistem Tata Letak yang Kuat
Flexbox dan CSS Grid keduanya adalah sistem desain yang membuat tata letak konten halaman web Anda menjadi mudah. Kisi paling baik untuk tata letak dua dimensi dengan banyak elemen yang perlu diposisikan secara tepat relatif satu sama lain. Flexbox lebih baik untuk tata letak satu dimensi atau garis tunggal di mana Anda hanya perlu memberi ruang pada banyak elemen dengan cara tertentu.
