Menambahkan teks paragraf Dalam mendesain web, pengalaman pengguna ditingkatkan hanya melalui tata letak yang kreatif dan fungsional. Dua teknik tata letak CSS yang paling ekspresif yang kita miliki saat ini tidak diragukan lagi adalah CSS Grid dan Flexbox. Keduanya digunakan untuk desain responsif yang lebih efektif dan efisien pada layout yang memiliki penggunaan ekstensif dari kueri media, tetapi keduanya memiliki tujuan yang berbeda. Mempelajari cara terbaik untuk menggunakan keduanya dapat memberikan keajaiban bagi proses desain web Anda.
Memahami CSS Grid
CSS Grid Layout adalah sistem tata letak dua dimensi untuk web yang memungkinkan kita untuk mendesain tata letak yang kompleks menggunakan baris dan kolom. Tata letak berbasis persentase adalah tata letak yang menggunakan jumlah umum sebagai persentase untuk menggambarkan lebar dan tinggi kolom, baris, atau bahkan selokan untuk tata letak Anda, tidak seperti metode mengambang dan posisi yang kami desainer gunakan dengan cara tradisional yang terstruktur sebelumnya, ... Grid adalah sistem tampilan, ini memungkinkan Anda untuk mendeklarasikan wadah grid dan menentukan berapa banyak baris dan kolom yang kita inginkan di dalamnya. Hal ini menjadi sangat berguna dalam tata letak yang membutuhkan item untuk disejajarkan dua arah seperti dashboard, atau grid gambar.
Sintaksis Dasar dan Penggunaan
Untuk menggunakan CSS Grid, Anda mulai dengan mendefinisikan wadah kisi dengan tampilan: grid; properti. Dari sana, Anda dapat mengatur jumlah baris dan kolom menggunakan properti seperti grid-template-columns dan grid-template-rows. Sebagai contoh:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 10px;
}
Pada tipe ini, grid dibuat dengan tiga kolom dengan lebar yang sama dan jarak 10 piksel di antara item-item pada grid. Sel di dalam grid ini dapat diposisikan lebih jauh dengan properti seperti grid-column atau flex-grid-item{grid-row: 1/2;}, untuk menyempurnakan tata letak.
Desain Responsif dengan Kisi
Responsif: Salah satu fitur paling keren dari CSS Grid [codeserf.net] Hal ini dapat diperbaiki dengan keajaiban kueri media yang memungkinkan Anda untuk mengubah bagaimana tata letak grid Anda akan terlihat tergantung pada ukuran layar. Di desktop, Anda dapat menampilkan tiga kolom tetapi di ponsel menyembunyikannya dan hanya memiliki satu kolom.
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr;
}
}
Kekuatan Flexbox
Jika CSS Grid adalah solusi sempurna untuk tata letak dua dimensi, Flexbox adalah yang terbaik untuk tata letak satu dimensi. Flexbox ditujukan untuk mendistribusikan ruang di sepanjang sumbu tunggal (vertikal atau horizontal) dan khususnya untuk membuat komponen yang perlu beradaptasi sebagai respons terhadap ukuran konten yang bervariasi (misalnya, navigasi, kartu).
Sintaks dan Penggunaan Dasar
Wadah fleksibel dibuat dengan mengatur tampilan elemen menjadi fleksibel. Ini berarti Anda dapat menentukan bagaimana item Anda diatur dalam kontainer. Contoh dengan flex-direction untuk mengontrol arah item, justify-content dan align-items untuk pemusatan, dll. dan bahkan akan membungkus baris penuh menggunakan properti seperti flex-wrap:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
Contoh berikut ini menata item wadah fleksibel dalam satu baris, membenarkan ruangnya secara merata dengan perataan di bagian tengah.
Tata Letak Kotak Fleksibel yang Responsif
Jadi, jika div Crop ONLY dapat fleksibel untuk melebarkan dan mengecilkan maka itu akan menjadi langkah yang SIGNIFIKAN terhadap responsifitas desktop. Tapi Anda dapat membuat ini bekerja lebih baik lagi dengan kueri media. Misalnya: mengubah arah item fleksibel dengan layar.
@media (max-width: 600px) {
.container {
flex-direction: column;
}
}
Grid vs Flexbox: Kasus Penggunaan yang Tepat
Kapan menggunakan CSS Grid Mendeteksi diri sendiri dan rekan-rekan Anda - Bukan Ilmu Roket/fwlink/telah-menulis-secara-ekstensif-tentang-pengoptimalan-dini')}}"> flexbox) CSS Grid: Dibutuhkan ketika bekerja dengan tata letak dua dimensi yang kompleks yang menentukan kontrol yang ketat terhadap baris dan kolom. Di sisi lain, Flexbox sangat bagus untuk tata letak satu dimensi sederhana di mana Anda membutuhkan fleksibilitas dalam ukuran dan perataan item.
Namun, sebagian besar waktu, menggabungkan CSS Grid dan Flexbox akan memberikan hasil yang diinginkan. Salah satu kasus penggunaan yang umum adalah menata seluruh halaman dengan Grid dan kemudian menyelaraskan elemen-elemen di dalam masing-masing item grid menggunakan Flexbox.
Kesimpulan
CSS Grid dan Flexbox digunakan untuk membangun tata letak modern, untuk desain web responsif yang membuat situs web terlihat fleksibel. Ketahui dan gunakan masing-masing dari mereka sehingga desain Anda memenuhi permintaan pengguna. Panduan lengkap untuk CSS ini akan mengajarkan Anda semua yang diperlukan termasuk pengetahuan tingkat lanjut sehingga ketika berbicara tentang desain, pekerjaan Anda tidak hanya terlihat bagus tetapi juga berjalan dengan baik di perangkat apa pun!
