Kisi atau Flexbox?

Michelle Barker, penulis materi yang kami terbitkan hari ini, mengatakan bahwa diskusi Twitter baru-baru ini yang dimulai oleh Chris Koyer membuatnya berpikir tentang bagaimana pengembang web memilih antara teknologi CSS Grid Layout dan CSS Flexbox Layout ketika mendesain layout.



Chris Koyer dalam tweetnya menanyakan kepada hadirin pertanyaan tentang bagaimana mereka yang tahu apa yang Grid dan Flexbox pilih untuk menjelaskan perbedaan antara teknologi ini.

Di antara jawaban untuk pertanyaan ini, yang, menurut Michelle, cukup diharapkan, adalah mungkin untuk mencatat ide-ide berharga dari Rachel Andrew dan Jen Simmons.

Rachel mengatakan teknologi Flexbox dirancang untuk mengembangkan tata ruang satu dimensi yang menggambarkan bagaimana elemen-elemen diatur dalam satu baris atau kolom. Dan teknologi Grid dirancang untuk mengembangkan tata letak dua dimensi yang mencakup baris dan kolom.

Jen mengatakan bahwa teknologi Grid digunakan untuk menggambarkan tata letak baris dan kolom. Dalam hal ini, konten akan ditempatkan di sel tata letak persis seperti yang dibutuhkan pengembang. Saat menggunakan Flexbox, ini tidak benar, dan ini bukan hanya tentang menempatkan data di dimensi kedua (ini sudah bisa dimengerti), tetapi juga tentang menempatkannya dalam satu dimensi. Teknologi Flexbox tidak cocok untuk sebagian besar kasus di mana ia digunakan.

Michelle mencatat bahwa hanya membaca tweet tidak mengungkapkan fitur menggunakan teknologi Grid dan Flexbox. Dalam artikel ini, dia ingin berbicara tentang kapan dan di mana menggunakan teknologi ini, serta tentang mengapa satu teknologi lebih disukai daripada yang lain.

Membaca jawaban atas pertanyaan Chris, Michelle terkejut dengan jumlah orang yang mengatakan bahwa mereka akan menggunakan Grid hanya untuk tata letak tingkat halaman, dan Flexbox untuk yang lainnya. Jika Anda juga mematuhi aturan seperti itu, ini berarti Anda benar-benar membatasi diri dalam hal menggunakan kemampuan Grid yang kuat dalam berbagai situasi. Hal utama yang ingin penulis rekomendasikan kepada pengembang web adalah bahwa setiap tata letak harus dianggap sebagai sesuatu yang istimewa, menganalisis kemampuan yang tersedia, dan tidak membuat asumsi tentang teknologi apa yang akan diperlukan untuk membuatnya. Berikut adalah beberapa pertanyaan yang dapat Anda tanyakan pada diri sendiri ketika memilih teknologi yang cocok untuk pengembangan tata letak.

Berapa banyak perhitungan yang harus Anda lakukan?

Ini jawaban saya untuk pertanyaan Chris. Saya katakan bahwa jika saya merasa bahwa ketika membuat tata letak Anda harus menggunakan fungsi calc() CSS terlalu sering, maka ini biasanya berarti bahwa saya memerlukan teknologi Grid, bukan Flexbox.

Jika Anda sering harus menggunakan fungsi calc() untuk secara akurat menghitung ukuran baris dan kolom (jika Anda perlu mempertimbangkan bidang internal, misalnya), ini sering menunjukkan bahwa Anda harus mempertimbangkan menggunakan teknologi Grid, karena penggunaan unit mengukur fr sangat menyederhanakan hidup Anda. Meskipun, sebagai rekomendasi umum, saran ini cukup layak, tetapi tidak menggambarkan gambaran lengkap tentang apa yang terjadi. Terkadang Grid juga diperlukan dalam kasus-kasus tersebut ketika fungsi calc() tidak digunakan saat membangun tata letak. Misalnya, dalam situasi di mana kita berbicara tentang tata letak dua dimensi dengan lebar tetap, elemen-elemennya adalah 200 piksel. Ketika mengembangkan tata letak seperti itu, fungsi calc() tidak diperlukan untuk mengetahui lebar elemen, tetapi pada saat yang sama, perilaku tata letak yang dibangun berdasarkan Grid dapat sangat berguna. Demikian pula, situasi dimungkinkan di mana yang terbaik adalah menggunakan Flexbox dan mau tidak mau menggunakan fungsi calc() . Akibatnya, apa yang kita bicarakan di sini dianggap paling baik bukan sebagai aturan yang kaku, seperti ini: “Gunakan calc() dan Flexbox? Jadi Anda perlu beralih ke Grid, ”tetapi sebagai informasi untuk dipikirkan.

Satu atau dua dimensi?

Perbedaan serius antara teknologi Grid dan Flexbox adalah bahwa yang pertama memungkinkan Anda untuk mengontrol pengaturan elemen dalam dua dimensi (dalam baris dan kolom), dan yang kedua tidak memungkinkan hal ini. Sekali lagi, ini tidak berarti bahwa Anda tidak boleh menggunakan Grid untuk tata letak satu dimensi. Saya sering memilih Grid - dalam kasus-kasus ketika saya membutuhkan akurasi tinggi dalam mengontrol ukuran dan posisi elemen yang terletak dalam satu dimensi. Pendekatan ini ditunjukkan dalam contoh ini pada CodePen, dan dalam artikel pendamping ini.


Contoh Grid

Bagaimana seharusnya elemen berperilaku?

Teknologi Grid sering kali masuk akal untuk digunakan dalam kasus di mana pengembang perlu mengontrol perilaku tata letak dalam dua dimensi. Namun, ini tidak berarti bahwa Grid selalu lebih baik daripada Flexbox. Saat menggunakan Grid, pengembang memiliki baris dan kolom, sel, dan apa yang disebut area grid, yang merupakan satu sel atau sekelompok beberapa sel. Saat menggunakan Grid, elemen harus ditemukan di sel atau area ini.

Misalkan kita memiliki tata letak berbasis Grid yang berbeda dalam fitur berikut: ada sembilan elemen yang terletak di tiga baris tiga elemen dari kiri ke kanan, ada 20 piksel antara elemen. Layout seperti itu dapat dibuat menggunakan Grid dan Flexbox. Kode untuk menggambarkan tata letak berbasis kisi jauh lebih sederhana dan lebih bersih:

 .grid {   display: grid;   grid-template-columns: repeat(3, 1fr);   grid-auto-rows: 200px;   /*     ,   ,      .        , `auto`,  ,        . */   gap: 20px; } 

Penggunaan tata letak seperti itu mengarah pada fakta bahwa elemen ditempatkan secara otomatis, sementara kita tidak perlu melakukan hal lain. Jika kita berpikir, kita dapat menggunakan fungsi Grid auto-fit() dan minmax() , yang memungkinkan kita mendapatkan tata letak yang sepenuhnya responsif tanpa menggunakan kueri media. Buka contoh ini , coba ubah ukuran jendela dan lihat apa yang terjadi.


Contoh Grid

Anda dapat mempelajari lebih lanjut tentang teknik ini, serta beberapa hal bermanfaat lainnya, dengan menonton video ini .

Jika kami membuat tata letak yang sama menggunakan Flexbox, maka, tidak seperti contoh yang baru saja dijelaskan, kami perlu menyesuaikan dgn elemen dan wadah:

 .grid {   display: flex;   flex-wrap: wrap;   margin: -10px;   width: calc(100% + 20px); } .item {   width: calc((100% / 3) - 20px);   flex: 0 0 auto;   margin: 0 10px 20px 10px; } 

Di sini, dalam wadah, Anda perlu menentukan nilai negatif untuk properti margin - untuk menetralkan fakta bahwa lebar total elemen lebih besar dari wadah itu sendiri, dan dengan demikian mentransfer data ke baris berikutnya. Selain itu, contoh ini tidak dapat menunjukkan perilaku responsif yang sama tanpa upaya tambahan dari kami. Selanjutnya, harus dicatat bahwa penggunaan pertanyaan media mungkin diperlukan di sini.

Berikut adalah contoh pada CodePen yang menggambarkan hal di atas.


Contoh Flexbox

Ada beberapa cara untuk membuat tata letak yang sama menggunakan Flexbox, tetapi semuanya memerlukan penggunaan beberapa "peretasan", dan ini terjadi karena alasan inilah sifatnya. Faktanya, kita berbicara tentang fakta bahwa kita mencoba menggunakan teknologi Flexbox untuk apa yang sebenarnya tidak dimaksudkan. Tetapi ini tidak berarti bahwa Flexbox selalu menjadi pilihan dasar untuk tata letak yang tidak berhasil.

Banyak kerangka kerja CSS modern menggunakan beberapa variasi metode ini untuk mewakili tata letak. Dan omong-omong, jika Anda ingin pergi dengan cara ini, saya dapat merekomendasikan Susy , seperangkat alat yang mengambil semua kesulitan dalam menciptakan tata letak seperti itu.

Jadi, apa yang lebih baik untuk dipilih dalam situasi ini? Kisi atau Flexbox? Tampaknya Grid memiliki beberapa kelebihan yang tidak dapat disangkal di sini, tetapi untuk menjawab pertanyaan ini, kita perlu memikirkan apa yang harus terjadi jika kita memiliki lebih dari sembilan, tetapi kurang dari 12 elemen (jika ada misalnya, 12, maka ini akan memungkinkan mereka untuk mengisi baris baru). Apakah kita memerlukan elemen-elemen baru itu hanya di awal baris berikutnya, seperti halnya dalam contoh yang kita lihat? Atau apakah kita membutuhkan mereka untuk berperilaku berbeda? Mungkin jika hanya ada satu elemen di baris berikutnya, maka kita membutuhkannya untuk menempati seluruh ruang baris ini, seperti pada opsi A dari contoh berikut? Atau mungkin jika hanya ada dua elemen di baris baru, kita perlu mereka berpusat, seperti pada Contoh B?


Opsi berbeda untuk menempatkan item di baris terakhir

Saat menggunakan tata letak berbasis Grid dengan penempatan elemen otomatis, kami hanya memiliki satu opsi - menempatkan elemen baru di sel yang dapat diakses yang terletak di sebelah kiri. Susunan elemen yang serupa dapat ditemukan dalam contoh sebelumnya. Di sini kita melanjutkan dari asumsi bahwa properti arah tidak diatur ke rtl (dalam hal ini, elemen akan terletak dari kanan ke kiri, dan satu-satunya elemen di baris terakhir adalah di sel kanan). Akibatnya, elemen baru saat menggunakan Grid ditempatkan di sel-sel grid yang tersedia berikut. Teknologi Flexbox memungkinkan Anda mengontrol tata letak item secara fleksibel. Ini berarti bahwa kita dapat mengontrol perilaku elemen menggunakan kombinasi properti yang mengontrol penempatan elemen dan perataannya.

Berikut adalah contoh yang menunjukkan tata letak seperti itu, saat menggunakan satu atau dua elemen per baris, yang dihitung pada tiga elemen, menempati seluruh baris ini.


Item menempati semua ruang baris yang tersedia.

Akibatnya, ternyata terlepas dari teknologi yang digunakan untuk membuat tata letak, semuanya bermuara pada perilaku seperti apa elemen-elemen yang terletak di tata letak itu menarik bagi pengembang. Dan dalam situasi yang berbeda, jawaban yang berbeda dapat diberikan untuk pertanyaan yang sama.

Apakah Anda mencoba mengganti Flexbox dengan Grid?

Ketika saya berbicara di berbagai acara, orang sering bertanya kepada saya kapan saya akan menggunakan Flexbox daripada Grid, dan apakah kami benar-benar membutuhkan teknologi seperti Flexbox. Seperti yang kita lihat pada contoh sebelumnya, Grid bukan pengganti untuk Flexbox. Kedua teknologi ini hidup berdampingan dengan cukup damai, dan pengetahuan tentang situasi di mana masing-masing dari mereka menunjukkan dirinya terbaik memperluas kemungkinan untuk merancang tata letak.


Contoh Komponen

Gambar ini menunjukkan komponen, selama pekerjaan yang diperlukan untuk mengontrol penempatan teks, gambar, dan judul, baik dengan mempertimbangkan kolom akun maupun dengan mempertimbangkan baris akun. Juga di sini Anda perlu mengontrol bagaimana mereka, sampai batas tertentu, berinteraksi satu sama lain. Satu-satunya cara untuk menyelesaikan masalah ini dengan memuaskan adalah dengan menggunakan teknologi Grid.
Tetapi tanpa ragu-ragu, saya akan menggunakan teknologi Flexbox untuk membuat menu navigasi, seperti yang ditunjukkan dalam contoh ini .


Menu Pembuatan Flexbox

Di sini perlu untuk mengontrol pengaturan elemen dalam dimensi tunggal, dan perlu bahwa elemen berperilaku fleksibel. Teknologi Flexbox melakukan tugasnya dengan sempurna. Berkat penggunaan Flexbox, Anda dapat menentukan apakah elemen-elemen ini harus dibungkus pada baris baru atau tidak, yang memungkinkan Anda untuk menampilkannya secara akurat jika ruang yang tersedia pada halaman tidak memungkinkan Anda untuk menampilkan semua elemen pada satu baris.

Bagaimana seharusnya tata letak terlihat di browser yang tidak mendukung teknologi Grid?

Jika kita menggunakan teknologi Grid, maka salah satu masalah yang mungkin perlu kita perhitungkan adalah dukungan browser untuk teknologi ini. Segera, kita perlu memikirkan apa yang akan terjadi jika halaman kita ditampilkan di salah satu browser yang tidak mendukung Grid (misalnya, di IE 11 dan di bawah). Pendekatan saya untuk memecahkan masalah ini adalah dengan menggunakan aturan @supports dan menyiapkan kode untuk berbagai browser. Seringkali (tetapi tidak selalu) saya, sebagai pengganti tata letak berbasis Grid, menggunakan tata letak berbasis Flexbox untuk browser yang cukup lama.

 .grid {   display: flex;   flex-wrap: wrap;   /*  ,     */ } @supports (display: grid) {   .grid {       display: grid;       /*  ,  Grid */   } } 

Benar, harus dicatat di sini bahwa jika Anda mendapati diri Anda menghabiskan berjam-jam mencoba untuk membuat ulang tanpa menggunakan Grid, apa yang dilakukan dengan menggunakan teknologi ini, maka mungkin Anda tidak memiliki sebanyak itu sejak awal. ada banyak alasan untuk menggunakan Grid. Lagi pula, teknologi ini sangat bagus karena mampu melakukan apa yang tidak bisa dilakukan secara eksklusif dengan Flexbox.

Ringkasan

Kami membahas beberapa contoh pengembangan tata letak yang sangat sederhana dan luas, memeriksa fitur-fitur menggunakan teknologi Grid dan Flexbox dalam konstruksi mereka. Kami berharap bahwa kami dapat memberikan makanan untuk dipikirkan bagi mereka yang sibuk memilih teknologi yang tepat untuk tata letak mereka berikutnya.

Pembaca yang budiman! Dalam situasi apa Anda menggunakan teknologi Grid, dan di mana - Flexbox?