Siapa pun yang telah melakukan setidaknya sedikit pengembangan situs web tahu bahwa tag
<div> adalah blok bangunan penting untuk mengendalikan tata letak.
HTML5 memperkenalkan elemen semantik baru untuk membantu hal ini. Dan meskipun mereka adalah tambahan bahasa yang fantastis, mereka sedikit seperti menghias sup kami dengan elemen
<div> .
Dengan munculnya CSS Grid, kita tidak perlu lagi mengandalkan elemen
<div> untuk membuat struktur halaman atau komponen yang lebih kompleks. Struktur secara harfiah ditentukan oleh elemen induk, bukan oleh bagaimana konten berada di dalamnya.
Ini berarti bahwa kita bisa mendapatkan tata letak sederhana yang bagus yang menyusun konten tanpa memperhatikan bagaimana awalnya diatur menggunakan elemen
<div> .
CSS Grid bisa rumit, tetapi Flexbox juga
Saya telah mendengar banyak orang mengeluh bahwa Grid terlalu kompleks dan Flexbox melakukan pekerjaan yang sama. Saya akan mengatakan bahwa mereka nyaman menggunakan Flexbox dan karenanya tidak memiliki keinginan untuk mempelajari lebih lanjut tentang CSS Grid.
Teknologi CSS Grid memang memperkenalkan banyak properti dan nilai baru, jadi ya, ada kurva belajar. Namun Flexbox juga cukup rumit.
Bisakah Anda berbicara tentang manfaat menggunakan properti
flex-basis bukan
width ? Atau bagaimana Flexbox menghitung lebar elemen fleksibel jika kami belum mendefinisikannya secara eksplisit?
Misalnya, jika Anda menunjukkan contoh di bawah ini kepada seseorang yang belum pernah menggunakan Flexbox, bagaimana Anda menjelaskan fakta bahwa ia memiliki tata letak dan gaya yang sama untuk kedua set kolom? Lebih buruk lagi, kolom kedua dalam kedua kasus adalah 50% lebar. Jelas, lebar 50% sebenarnya tidak mengatur ukuran elemen menjadi 50%.
"Yah, itu semua dimulai dengan fakta bahwa elemen-elemen dikompresi jika tidak ada cukup ruang dalam wadah, oleh karena itu, bahkan jika kita mengatur lebar elemen = 50%, itu tidak memiliki ruang yang cukup, sehingga mulai kompres untuk masuk ke dalam wadah, karena yang lain
<div> membutuhkan lebih banyak ruang. 50% kemungkinan besar ukuran ideal untuk blok, tetapi bukan ukuran sebenarnya. ”
“Jadi, dalam contoh di atas, konten blok pertama sangat besar sehingga menciptakan masalah, karena, sebagai elemen fleksibel, secara default cenderung menyusut untuk mengakomodasi konten. Dalam contoh ini, elemen ini memiliki banyak konten, jadi ...
Jadi ya, flexbox hebat dan melakukan pekerjaan yang baik untuk membuat tata letak, tapi tolong jangan bilang itu sederhana. Segera setelah Anda beralih dari contoh ideal ke tugas-tugas pekerjaan, perilaku seperti itu seringkali jauh dari pemahaman intuitif, dan kadang-kadang itu bisa sangat aneh.
Grid adalah kompleks karena memerlukan banyak properti dan nilai baru, tetapi mereka memberi kita lebih banyak kontrol daripada flexbox.
Pada artikel ini, saya ingin mempertimbangkan bagaimana tingkat kontrol tambahan ini membantu menyederhanakan markup kami dan memungkinkan kami untuk menulis lebih sedikit kode, semua tanpa harus belajar bagaimana menggunakan sejumlah fungsi anehnya.
Keterbatasan Flexbox
Bahkan jika kita mengambil komponen sederhana dan membuatnya menggunakan flexbox, karena fakta bahwa itu hanya bertindak dalam 1 dimensi (elemen flex adalah baris atau kolom, mereka tidak bisa keduanya), kita punya banyak jumlah elemen yang digunakan untuk membuat baris, yang kemudian dapat dibagi menjadi kolom.
Misalnya, jika kami mengerjakan kartu seperti ini:
Ini bukan tata letak yang rumit, tetapi kami masih perlu mengatur konten kami dengan cara yang agak spesifik untuk membuatnya berfungsi.
Blok kuning dan oranye dalam situasi ini diperlukan sehingga saat menambahkan tampilan: properti flex untuk elemen .card (blok merah), dua kolom dibuat. Dengan demikian, untuk menyusun semua konten, kami mendapatkan markup yang terlihat seperti ini:
<div class="card"> <div class="profile-sidebar"> </div> <div class="profile-body"> </div> </div>
Setelah Anda memahami cara kerja Flexbox, memahami struktur ini akan mudah.
Ketika kita menambahkan
display: flex properti
display: flex untuk elemen
.card , kita mendapatkan dua kolom, setelah itu kita perlu menyesuaikan dgn mode masing-masing secara terpisah.
Berikut adalah contoh kerja dengan semua gaya:
Faktanya adalah ketika kita membuat kolom konten, kita mendapatkan markup yang sedikit lebih rumit, dan kita juga membatasi diri kita sendiri, karena kita memaksa bagian konten yang berbeda untuk dikelompokkan bersama.
Sederhanakan semuanya dengan CSS Grid
Karena CSS Grid adalah dua dimensi, itu memungkinkan kita untuk membuat baris dan kolom pada saat yang sama, yang berarti bahwa wadah kotak (yang kita atur
display: grid properti
display: grid ) memiliki kontrol penuh atas tata letak di dalam.
Sebelumnya, ini membutuhkan elemen tambahan, seperti pada contoh Flexbox di atas. Menggunakan Grid, kita dapat sepenuhnya menyingkirkannya.
<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div>
Dari sudut pandang markup, bukankah itu lebih masuk akal?
Ada elemen dengan kartu
.card di mana kita menaruh konten langsungnya. Kita tidak perlu khawatir tentang struktur dan tata letak elemen, kita cukup meletakkan konten yang kita butuhkan dan melanjutkan.
Penataan tata letak
Sama seperti ketika menggunakan Flexbox, kita masih perlu menyusun tata letak, meskipun karena spesifikasi Grid, tampilannya sedikit berbeda.
Ini adalah salah satu situasi di mana orang dapat berpendapat bahwa Grid lebih rumit, tetapi pada kenyataannya, saya hanya menggambar blok di sekitar setiap konten.
Menggunakan Flexbox, kami membuat dua blok yang menonjol sebagai kolom. Saat menggunakan Grid, sebagai gantinya, kami mengonfigurasi seluruh grid untuk elemen induk, dan kemudian menunjukkan ke elemen anak tempat duduk di grid ini.
Untuk mengatur kisi, kita dapat melakukan sesuatu seperti ini:
.card { display: grid; grid-template-columns: 1fr 3fr; }
Unit ukuran unik untuk Grid, dan menunjukkan proporsi ruang yang tersedia. Penggunaan ini sangat mirip dengan menginstal dua kolom di Flexbox dan menentukan lebarnya masing-masing 25% dan 75%.
Menempatkan item pada kotak
Mungkin karena fakta bahwa selama bertahun-tahun saya menggunakan float untuk membuat markup, sekarang situasi di mana elemen-elemen ditempatkan tepat di tempat mereka diperlukan tampak seperti sihir kecil.
Anda bisa menggunakan
grid-row -
grid-column dan
grid-column untuk setiap elemen untuk menempatkannya tepat di tempat yang kita inginkan, tetapi semakin saya menggunakan Grid, semakin saya jatuh cinta dengan properti
grid-template-areas dan elemen tempat menggunakan definisi area.
Pendekatan ini membutuhkan waktu lebih lama, tetapi itu sepadan, terutama ketika kita membuat desain adaptif (kita akan segera melakukan ini).
Pertama kita perlu mendefinisikan
grid-template-areas untuk elemen
.card , setelah itu kita dapat menetapkan semua elemen
.card ke area ini:
.card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; }
Dalam contoh di bawah ini, Anda dapat melihat semua ini beraksi:
Sesederhana itu
Salah satu alasan saya suka menggunakan
grid-template-areas adalah bahwa jika orang lain melihat kode, mereka akan segera mengerti apa yang terjadi ...
Jika seseorang menunjukkan kepada Anda kode di mana
grid-row -
grid-column dan
grid-column ditentukan menggunakan angka dan
span , sangat mudah untuk menghitung dan memahami di mana dan bagaimana mereka akan menemukan elemen. Untuk tata letak sederhana atau untuk menggunakan bentang di beberapa tempat, saya menganggap penggunaannya sesuai,
tetapi jauh lebih menyenangkan, hanya dengan melihat kode elemen induk, segera pahami bagaimana keseluruhan tata letak akan terlihat .
Saat menggunakan Kotak, lebih mudah untuk mengetahui ukuran sebenarnya dari suatu elemen
Dalam contoh pertama kami, di mana kami mengatur lebar salah satu elemen fleksibel = 50%, sebenarnya itu tidak sama dengan 50%. Jika Anda mengerti mengapa ini terjadi, bagus, tetapi kadang-kadang masih bisa mengganggu. Ini cukup mudah untuk dilakukan, tetapi ketika menggunakan Grid, itu menjadi masalah yang jauh lebih kecil.
Karena kami mendefinisikan seluruh tata letak, kami juga menentukan dengan tepat berapa banyak elemen ruang yang harus ditempati.
Dan tentu saja, kita memiliki fungsi
minmax() dan satuan ukuran
fr , yang mengaduk air sedikit, karena mereka memungkinkan kita untuk menentukan ukuran lebih fleksibel (seperti yang kita gunakan dalam contoh di atas), tetapi bahkan kemudian kita masih memiliki kontrol penuh atas fleksibilitas mereka, dan semua ini dikendalikan oleh orang tua, tanpa perlu mengatur beberapa properti untuk orang tua, dan beberapa untuk anak-anak.
Perubahan Terbatas
Jika kita melihat contoh Flexbox, kita tidak bisa membuatnya seperti tata letak di bawah ini tanpa mengubah markup HTML:
Kami membatasi diri pada cara kami mengelompokkan elemen bersama-sama menggunakan
<div> . Kami harus menggunakan ini
<div> untuk membuat tata letak berfungsi, tetapi sekarang telah menjadi kendala bagi kami.
Dengan anak-anak dari wadah kami berada di tingkat yang sama, Anda dapat melakukan segalanya . Dan sebagai bonus tambahan, karena kami mengonfigurasi semuanya menggunakan area
grid-template-areas , membuat perubahan ini sangat mudah.
.card { grid-template-areas: "image name" "image position" "image social" ". description"; }
Bermain dengan bidang
grid-template-areas cara ini, Anda dapat dengan cepat dan mudah menggeser ikon jejaring sosial ke tempat kami ingin melihatnya (titik di bagian terakhir menunjukkan sel kosong).
Itu membuat hidup lebih mudah ketika bekerja dengan pertanyaan media.
Seperti yang saya sebutkan beberapa kali, ini adalah kasus ketika menggunakan
grid-template-areas dijamin. Kami dapat sepenuhnya mengontrol tata letak kami hanya menggunakan properti dari induk:
.card { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } }
CodePen di bawah ini berisi contoh gaya sepenuhnya. Anda dapat mempelajarinya, bermain dengan area kisi dan melihat betapa mudahnya membangun kembali tata letak sepenuhnya.
Flexbox masih memiliki cakupannya sendiri
Saya menggunakan Grid semakin banyak, tetapi saya pikir Flexbox masih memiliki cakupannya sendiri. Jika saya memiliki logo dan navigasi yang terletak bersebelahan, alangkah baiknya memiliki cara mudah untuk melakukan sesuatu seperti ini dan tahu bahwa mereka akan berada di tempat yang saya inginkan:
.header { display: flex; justify-content: space-between; }
Hal yang sama berlaku untuk
<ul> yang kami gunakan untuk navigasi, hanya untuk mendapatkan elemen yang mengikuti satu sama lain, atau, seperti yang Anda lihat dalam contoh dengan kartu yang kami periksa, sangat ideal untuk
.social-list .
Untuk komponen sederhana di mana kita tidak memerlukan tata letak yang rumit, ini benar-benar berfungsi dengan baik. Tetapi lebih dan lebih, saya melihat gerakan menuju Grid, kadang-kadang karena kebutuhan yang jelas untuk mereka, kadang-kadang karena saya ingin menggunakan fungsi
minmax() atau satuan ukuran
fr .
Tetapi pada akhirnya, saya pikir hal terbaik tentang Grid adalah kemampuan untuk sangat menyederhanakan markup kami.
Kami masih dipaksa untuk menggunakan
<div> , tetapi berkat Grid, kami dapat menggunakannya semakin sedikit.
Kesimpulannya
Tidak peduli seberapa bagus Flexbox, itu tidak lebih sederhana dari Grid. Ini benar-benar berfungsi dengan baik dalam situasi tertentu, tetapi ketika bekerja dengan tata letak yang lebih kompleks, Grid memungkinkan kita untuk memiliki kontrol lebih banyak. Kontrol ini ditingkatkan saat bekerja dengan desain responsif saat membuat perubahan pada pertanyaan media.
Saat menggunakan Flexbox, hal terbaik yang dapat kita ubah adalah
flex-direction . Menggunakan Grid, kita dapat dengan cepat dan sederhana mengubah desain suatu komponen.
Baik Flexbox maupun Grid memiliki lebih banyak fitur. Masing-masing memiliki tujuan, tetapi jika Anda merasa bahwa Anda tidak tahu pendekatan mana yang harus diambil, atau terjebak mencoba memahami desain responsif secara umum, saya baru-baru ini mengumumkan kursus di Scrimba yang membahas desain responsif yang disebut Bootcamp Desain Web Responsif.