Desain web modern berkisar pada tata letak yang fleksibel dan responsif yang memberikan pengalaman yang luar biasa kepada pengguna saat melihat konten Anda di berbagai perangkat dan ukuran layar. CSS Grid System dan Flexbox adalah dua alat CSS yang paling kompleks namun umum digunakan untuk tata letak dinamis ini. Keduanya menawarkan metode yang ampuh untuk mendesain tata letak, yang memungkinkan para pengembang untuk membuat struktur yang rumit dengan kode yang lebih sedikit dan fleksibilitas yang lebih tinggi daripada sebelumnya. Artikel ini membahas apa yang dimaksud dengan kedua sistem ini dan bagaimana keduanya dapat digunakan bersama-sama atau secara independen untuk menghasilkan desain yang serbaguna dan efisien.
Kisi-kisi CSS: Sistem Tata Letak untuk Dua Dimensi
CSS Grid adalah sistem tata letak 2-D yang memungkinkan kita untuk membuat tata letak web dalam bentuk baris dan kolom. Tidak seperti gaya tata letak yang lebih lama seperti float dan tabel, CSS Grid memberikan pengembang tata letak yang lebih fleksibel dan terkontrol. Grid memungkinkan pengembang untuk menentukan tinggi dan lebar elemen, menyesuaikannya dengan cara yang ampuh untuk membuat struktur halaman yang kompleks dengan penempatan yang tepat.
Dengan CSS Grid, pengembang membuat wadah kisi dan kemudian menambahkan elemen anak ke baris dan kolom kisi tersebut. Ini adalah contoh tata letak kisi yang ditulis dalam CSS:
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-gap: 20px;
}
.item {
background-color: lightblue;
}
Sumber: tekniksipil.id
Untuk contoh ini, wadah grid dipisahkan menjadi dua kolom. Kami mendefinisikan satu kolom menggunakan 1fr dan kolom lainnya dengan 3fr. Celah kisi - Properti ini digunakan untuk memberikan ruang di antara item kisi Fleksibilitas ini memungkinkan pembuatan tata letak yang kompleks secara sederhana seperti desain gaya majalah, dasbor, atau bahkan kisi produk.
Manfaat utama CSS Grid adalah Anda dapat menggunakannya untuk membuat grid dengan item dengan lebar tetap dan fleksibel. Seperti membuat tata letak grid di mana beberapa item akan memiliki lebar tetap sementara yang lain akan menggunakan ruang yang tersisa secara fleksibel.
Flexbox Sistem tata letak satu dimensi
Tata Letak Kotak Fleksibel, atau singkatnya flexbox, adalah model tata letak satu dimensi yang menangani distribusi ruang item dengan cara yang sangat sederhana di sepanjang sumbu tunggal (baik sebagai baris atau kolom). CSS Grid lebih baik dalam hal tata letak dua dimensi, tetapi Flexbox mendapat lebih banyak pujian untuk tata letak satu dimensi yang sederhana (Anda hanya ingin item dalam baris atau kolom).
Flexbox memungkinkan kontrol yang kuat dan mudah untuk perataan, distribusi, dan ukuran item dalam sebuah wadah, membuatnya sempurna untuk komponen yang lebih kecil seperti bilah navigasi, tata letak kartu, atau tata letak formulir. Item Flexbox tumbuh / menyusut secara dinamis tergantung pada seberapa banyak ruang yang tersisa di dalam wadah yang memungkinkan pengembang dengan kontrol yang tepat atas fleksibilitas item.
Ini adalah contoh Flexbox yang sangat mendasar:
.container {
display: flex;
justify-content: space-between;
align-items: center;
}
.item {
background-color: lightgreen;
}
Properti justify-content: spasi-antara; pada contoh ini memastikan bahwa item didistribusikan secara merata di sepanjang sumbu horizontal. Aturan yang sama dengan flexbox tetapi di sini kita menggunakan align-items: center; yang berarti objek ditempatkan pada posisi tengah vertikal dari badan di dalam wadah. Flexbox menyelesaikan hal ini dengan menyelaraskan item secara horizontal dan vertikal tanpa perlu peretasan CSS tambahan.
Oleh karena itu, Flexbox juga cocok secara alami untuk kemudahan daya tanggap. Omong-omong, Anda memiliki kueri media untuk mengubah arah fleksibel itu menjadi dari baris ke kolom berdasarkan ukuran layar, jadi sangat bagus untuk tata letak responsif seluler pertama juga.
Gunakan Grid atau Flexbox?
Meskipun CSS Grid dan Flexbox memiliki kekuatan super, mengetahui kapan harus menggunakan salah satunya dapat membuat Anda menjadi seorang ninja CSS Grid.
- CSS Grid Ketika Anda perlu mengontrol baris dan kolom secara bersamaan, CSS Grid sangat berguna untuk tata letak yang lebih kompleks. Ideal untuk tata letak blok besar (seperti halaman penuh atau blok) dengan kekuatan pemosisian horizontal dan vertikal terbaik.
- Flexbox lebih baik untuk tata letak langsung dengan hanya satu baris atau kolom. Sangat baik untuk bagian yang lebih kecil seperti header, navbar, atau kartu yang perlu merespons ketika ruang tersedia.
Salah satu kasus penggunaan yang paling umum adalah memasangkan Grid dengan Flexbox. Misalnya, Anda dapat menggunakan Grid untuk mendesain tata letak situs web (misalnya: header, bilah sisi, konten, dan footer) yang mempertahankan bentuk umum halaman, sementara Flexbox digunakan di dalam komponen (tombol atau item navigasi) untuk mengontrol bagaimana jarak dan perataan bekerja untuk item-item tersebut.
Kesimpulan
CSS Grid dan Flexbox: Tata Letak Fleksibel dengan CSDalam desain web modern, CSS Grid dan Flexbox menawarkan alat bantu yang kuat untuk membuat tata letak yang fleksibel dan responsif yang dapat beradaptasi dengan berbagai ukuran layar dan perangkat. Terlepas dari namanya, CSS Grid tidak selalu merupakan alat yang tepat untuk pekerjaan itu; Flexbox bersinar dengan pengaturan satu dimensi yang lebih sederhana sementara CSS Grid paling cocok untuk tata letak dua dimensi yang kuat. Untuk desainer web, mengetahui bagaimana perilaku masing-masing akan memungkinkan untuk membuat keputusan yang lebih terdidik; keputusan yang lebih kecil kemungkinannya untuk menghasilkan perilaku yang tidak terduga dan pada akhirnya mengarah pada masalah komposisi di berbagai perangkat.
Kembali ke>> Desain Web Responsif: Panduan Langkah-demi-Langkah