Praktik Terbaik Dengan Tata Letak Kotak CSS

Pertanyaan yang semakin umum — sekarang orang-orang menggunakan Tata Letak Kotak CSS dalam produksi — tampaknya adalah “Apa praktik terbaiknya?” Jawaban singkat untuk pertanyaan ini adalah dengan menggunakan metode tata letak seperti yang didefinisikan dalam spesifikasi. Bagian tertentu dari spesifikasi yang Anda pilih untuk digunakan, dan memang bagaimana Anda menggabungkan Grid dengan metode tata letak lain seperti Flexbox, tergantung pada apa yang berhasil untuk pola yang Anda coba bangun dan bagaimana Anda dan tim ingin bekerja.

Melihat lebih dalam, saya pikir mungkin permintaan untuk "praktik terbaik" ini mungkin menunjukkan kurangnya kepercayaan diri dalam menggunakan metode tata letak yang sangat berbeda dari sebelumnya. Mungkin kekhawatiran bahwa kita menggunakan Grid untuk hal-hal yang tidak dirancang untuknya, atau tidak menggunakan Grid saat seharusnya. Mungkin karena kekhawatiran tentang mendukung browser lama, atau bagaimana Grid cocok dengan alur kerja pengembangan kami.

Dalam artikel ini, saya akan mencoba dan membahas beberapa hal yang dapat digambarkan sebagai praktik terbaik, dan beberapa hal yang mungkin tidak perlu Anda khawatirkan.

Survei

Untuk membantu menginformasikan artikel ini, saya ingin mengetahui bagaimana orang lain menggunakan Tata Letak Grid dalam produksi, apa tantangan yang mereka hadapi, apa yang benar-benar mereka nikmati? Apakah ada pertanyaan umum, masalah atau metode yang digunakan. Untuk mengetahuinya, saya mengumpulkan survei singkat, mengajukan pertanyaan tentang bagaimana orang menggunakan Tata Letak Kotak, dan khususnya, apa yang paling mereka sukai dan apa yang menurut mereka menantang.

Dalam artikel berikut, saya akan merujuk dan mengutip langsung beberapa tanggapan tersebut. Saya juga akan menautkan ke banyak sumber lain, di mana Anda dapat mengetahui lebih banyak tentang teknik yang dijelaskan. Ternyata, ada lebih dari satu artikel yang menarik untuk dibongkar dalam tanggapan survei. Saya akan membahas beberapa hal lain yang muncul di posting mendatang.

Aksesibilitas

Jika ada bagian dari spesifikasi Grid yang perlu Anda perhatikan saat menggunakan, itu adalah saat menggunakan apa pun yang dapat menyebabkan pemesanan ulang konten:

“Penulis harus menggunakan urutan dan properti penempatan kisi hanya untuk penataan ulang konten secara visual, bukan logis. Lembar gaya yang menggunakan fitur ini untuk melakukan penataan ulang logis tidak sesuai.”

— Spesifikasi Grid: Pemesanan Ulang dan Aksesibilitas

Ini tidak unik untuk Grid, namun, kemampuan untuk mengatur ulang konten dengan mudah dalam dua dimensi membuatnya menjadi masalah yang lebih besar untuk Grid. Namun, jika menggunakan metode apa pun yang memungkinkan pengurutan ulang konten — baik itu Grid, Flexbox, atau bahkan pemosisian absolut — Anda harus berhati-hati untuk tidak memutuskan pengalaman visual dari cara konten disusun dalam dokumen. Pembaca layar (dan orang-orang yang menavigasi dokumen menggunakan keyboard saja) akan mengikuti urutan item di sumbernya.

Tempat-tempat di mana Anda harus sangat berhati-hati adalah saat menggunakan flex-direction untuk membalik urutan di Flexbox; properti order di Flexbox atau Grid; penempatan item Grid menggunakan metode apa pun, jika memindahkan item keluar dari urutan logis dalam dokumen; dan menggunakan mode pengepakan padat dari grid-auto-flow .

Untuk informasi selengkapnya tentang masalah ini, lihat sumber daya berikut ini:

• Tata Letak dan Aksesibilitas Grid - MDN
• Flexbox dan pemutusan navigasi keyboard

Metode Tata Letak Kotak Mana yang Harus Saya Gunakan?

”Dengan begitu banyak pilihan di Grid, merupakan tantangan untuk tetap berpegang pada cara penulisan yang konsisten (misalnya memberi nama garis grid atau tidak, menentukan area template-grid, fallback, kueri media) sehingga dapat dipertahankan oleh keseluruhan tim."

— Michelle Barker

Saat pertama kali melihat Grid, mungkin tampak luar biasa dengan begitu banyak cara berbeda untuk membuat tata letak. Namun, pada akhirnya, semuanya bermuara pada hal-hal yang diposisikan dari satu garis kisi ke garis lainnya. Anda memiliki pilihan berdasarkan tata letak yang ingin Anda capai, serta apa yang bekerja dengan baik untuk tim Anda dan situs yang sedang Anda bangun.

Tidak ada cara yang benar atau salah. Di bawah ini, saya akan membahas beberapa tema umum kebingungan. Saya juga telah membahas banyak area kebingungan potensial lainnya di artikel sebelumnya “Grid Gotchas dan Stumbling Blocks.”

Haruskah Saya Menggunakan Grid Implisit Atau Eksplisit?

Kisi-kisi yang Anda tentukan dengan grid-template-columns grid-template-rows dikenal sebagai Kisi Eksplisit. Kisi Eksplisit memungkinkan penamaan garis pada Kisi dan juga memberi Anda kemampuan untuk menargetkan garis akhir kisi dengan -1 . Anda akan memilih Grid Eksplisit untuk melakukan salah satu dari hal-hal ini dan secara umum ketika Anda memiliki tata letak yang semuanya dirancang dan tahu persis ke mana garis grid Anda harus pergi dan ukuran trek.

Saya paling sering menggunakan Grid Implisit untuk trek baris. Saya ingin mendefinisikan kolom tetapi kemudian baris hanya akan berukuran otomatis dan tumbuh berisi konten. Anda dapat mengontrol Grid Implisit sampai batas tertentu dengan grid-auto-columns dan grid-auto-rows , namun, Anda memiliki kontrol yang lebih sedikit daripada jika Anda mendefinisikan semuanya.

Anda perlu memutuskan apakah Anda tahu persis berapa banyak konten yang Anda miliki dan oleh karena itu jumlah baris dan kolom — dalam hal ini Anda dapat membuat Kotak Eksplisit. Jika Anda tidak tahu berapa banyak konten yang Anda miliki, tetapi hanya ingin baris atau kolom dibuat untuk menampung apa pun yang ada, Anda akan menggunakan Grid Implicit.

Namun demikian, adalah mungkin untuk menggabungkan keduanya. Di CSS di bawah ini, saya telah mendefinisikan tiga kolom di Grid Eksplisit dan tiga baris, jadi tiga baris konten pertama adalah sebagai berikut:

• Trek dengan tinggi minimal 200 piksel, tetapi diperluas untuk membuat konten lebih tinggi,
• Sebuah trek tetap pada ketinggian 400px,
• Trek dengan ketinggian minimal 300 piksel (tetapi meluas).

Konten selanjutnya akan masuk ke baris yang dibuat di Grid Implicit, dan saya menggunakan properti grid-auto-rows untuk membuat trek tersebut setidaknya setinggi 300px, berkembang menjadi auto .

 .grid { display: grid; grid-template-columns: 1fr 3fr 1fr; grid-template-rows: minmax(200px auto) 400px minmax(300px, auto); grid-auto-rows: minmax(300px, auto); grid-gap: 20px; }

Kisi Fleksibel Dengan Jumlah Kolom Fleksibel

Dengan menggunakan Notasi Ulang, IsiOtomatis, dan minmax, Anda dapat membuat pola trek sebanyak yang sesuai dengan wadah, sehingga menghilangkan kebutuhan akan Kueri Media sampai batas tertentu. Teknik ini dapat ditemukan dalam tutorial video ini, dan juga didemonstrasikan bersama dengan ide serupa di artikel terbaru saya “Menggunakan Kueri Media Untuk Desain Responsif Pada 2018.”

Pilih teknik ini saat Anda senang konten turun di bawah konten sebelumnya saat ada lebih sedikit ruang, dan dengan senang hati memungkinkan banyak fleksibilitas dalam ukuran. Anda telah secara khusus meminta kolom Anda untuk ditampilkan dengan ukuran minimum, dan untuk mengisi otomatis .

Ada beberapa komentar dalam survei yang membuat saya bertanya-tanya apakah orang memilih metode ini ketika mereka benar-benar menginginkan kotak dengan jumlah kolom yang tetap. Jika Anda berakhir dengan jumlah kolom yang tidak dapat diprediksi pada breakpoint tertentu, Anda mungkin lebih baik mengatur jumlah kolom — dan mendefinisikannya kembali dengan kueri media sesuai kebutuhan — daripada menggunakan auto-fill auto-fit .

Metode Pengukuran Track Mana yang Harus Saya Gunakan?

Saya menjelaskan ukuran trek secara rinci dalam artikel saya “Seberapa Besar Kotak Itu? Memahami Ukuran Dalam Tata Letak Kotak”, namun, saya sering mendapat pertanyaan tentang metode ukuran trek mana yang akan digunakan. Khususnya, saya ditanya tentang perbedaan antara ukuran persentase dan unit fr .

Jika Anda hanya menggunakan unit fr sebagai spesifikasi, maka berbeda dengan menggunakan persentase karena mendistribusikan ruang yang tersedia. Jika Anda menempatkan item yang lebih besar ke dalam trek maka cara fr sampai akan bekerja adalah dengan membiarkan trek itu mengambil lebih banyak ruang dan mendistribusikan apa yang tersisa.

 .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; } 

Untuk menyebabkan unit fr mendistribusikan semua ruang dalam wadah kisi, Anda harus memberikan ukuran minimum 0 menggunakan minmax() .

 .grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr); grid-gap: 20px; }

Jadi, Anda dapat memilih untuk menggunakan fr dalam salah satu skenario berikut: skenario di mana Anda menginginkan distribusi ruang dari dasar otomatis (perilaku default), dan skenario di mana Anda menginginkan distribusi yang sama. Saya biasanya akan menggunakan unit fr karena kemudian menentukan ukuran untuk Anda, dan memungkinkan penggunaan trek atau celah dengan lebar tetap. Satu-satunya waktu saya menggunakan persentase sebagai gantinya adalah ketika saya menambahkan komponen kisi ke tata letak yang ada yang menggunakan metode tata letak lain juga. Jika saya ingin komponen kisi saya sejajar dengan tata letak berbasis float atau fleksibel yang menggunakan persentase, menggunakannya dalam tata letak kisi berarti semuanya menggunakan metode ukuran yang sama.

Tempatkan Item Secara Otomatis Atau Atur Posisinya?

Anda akan sering menemukan bahwa Anda hanya perlu menempatkan satu atau dua item dalam tata letak Anda, dan sisanya jatuh ke tempatnya berdasarkan urutan konten. Sebenarnya, ini adalah tes yang sangat bagus bahwa Anda belum memutuskan sambungan sumber dan tampilan visual. Jika hal-hal cukup banyak turun ke posisi berdasarkan penempatan otomatis, maka mereka mungkin dalam urutan yang baik.

Namun, begitu saya memutuskan ke mana semuanya pergi, saya cenderung menetapkan posisi untuk semuanya. Ini berarti bahwa saya tidak berakhir dengan hal-hal aneh yang terjadi jika seseorang menambahkan sesuatu ke dokumen dan grid menempatkannya secara otomatis di suatu tempat yang tidak terduga, sehingga membuang tata letaknya. Jika semuanya ditempatkan, Grid akan memasukkan item itu ke sel grid kosong berikutnya yang tersedia. Itu mungkin tidak tepat di tempat yang Anda inginkan, tetapi duduk di akhir tata letak Anda mungkin lebih baik daripada muncul di tengah dan mendorong hal-hal lain.

Metode Pemosisian Mana yang Digunakan?

Saat bekerja dengan Tata Letak Kotak, pada akhirnya semuanya bermuara pada penempatan item dari satu baris ke baris lainnya. Segala sesuatu yang lain pada dasarnya adalah penolong untuk itu.

Putuskan dengan tim Anda apakah Anda ingin memberi nama garis, gunakan Area Templat Kisi, atau jika Anda akan menggunakan kombinasi berbagai jenis tata letak. Saya menemukan bahwa saya suka menggunakan Area Template Grid untuk komponen kecil pada khususnya. Namun, tidak ada benar atau salah. Cari tahu apa yang terbaik untuk Anda.

Grid Dalam Kombinasi Dengan Mekanisme Tata Letak Lainnya

Ingatlah bahwa Tata Letak Kotak bukanlah satu-satunya metode tata letak yang benar untuk mengatur semuanya, ini dirancang untuk jenis tata letak tertentu — yaitu tata letak dua dimensi. Metode tata letak lainnya masih ada dan Anda harus mempertimbangkan setiap pola dan yang paling sesuai.

Saya pikir ini sebenarnya cukup sulit bagi kita yang terbiasa meretas dengan metode tata letak untuk membuat mereka melakukan sesuatu yang sebenarnya tidak dirancang untuk mereka. Ini adalah saat yang tepat untuk mengambil langkah mundur, melihat metode tata letak untuk tugas yang dirancang untuknya, dan ingat untuk menggunakannya untuk tugas tersebut.

Secara khusus, tidak peduli seberapa sering saya menulis tentang Grid versus Flexbox, saya akan ditanya mana yang harus digunakan orang. Ada banyak pola di mana salah satu metode tata letak masuk akal dan itu terserah Anda. Tidak ada yang akan meneriaki Anda karena memilih Flexbox di atas Grid, atau Grid di atas Flexbox.

Dalam pekerjaan saya sendiri, saya cenderung menggunakan Flexbox untuk komponen di mana saya ingin ukuran alami item untuk mengontrol tata letaknya dengan kuat, pada dasarnya mendorong item lain di sekitarnya. Saya juga sering menggunakan Flexbox karena saya ingin alignment, mengingat properti Box Alignment hanya tersedia untuk digunakan di Flexbox dan Grid. Saya mungkin memiliki wadah Flex dengan satu item anak, agar saya dapat menyelaraskan anak itu.

Tanda bahwa mungkin Flexbox bukan metode tata letak yang harus saya pilih adalah ketika saya mulai menambahkan lebar persentase ke item melenturkan dan menyetel flex-grow ke 0. Alasan untuk menambahkan lebar persentase ke item melenturkan sering kali karena saya mencoba membuat garis mereka dalam dua dimensi (sejajarkan hal-hal dalam dua dimensi adalah persis untuk apa Grid). Namun, cobalah keduanya, dan lihat mana yang paling sesuai dengan konten atau pola desain. Anda tidak mungkin menyebabkan masalah dengan melakukannya.

Kotak Bersarang Dan Item Fleksibel

Ini juga sering muncul, dan sama sekali tidak ada masalah dengan membuat Item Kotak juga Wadah Kotak, sehingga bersarang satu kotak di dalam kotak lainnya. Anda dapat melakukan hal yang sama dengan Flexbox, membuat Flex Item dan Flex Container. Anda juga dapat membuat Item Grid dan Flex Container atau Flex Item menjadi Grid Container — tidak satu pun dari hal-hal ini yang menjadi masalah!

Apa yang saat ini tidak dapat kami lakukan adalah menyarangkan satu kisi di dalam kisi lain dan membuat kisi bersarang menggunakan trek kisi yang ditentukan pada induk keseluruhan. Ini akan sangat berguna dan itulah yang diharapkan dapat diselesaikan oleh proposal subgrid di Level 2 dari Spesifikasi Grid. Grid bersarang saat ini menjadi grid baru sehingga Anda harus berhati-hati dengan ukuran untuk memastikannya sejajar dengan trek induk.

Anda Dapat Memiliki Banyak Grid Di Satu Halaman

Sebuah komentar muncul beberapa kali dalam survei yang mengejutkan saya, tampaknya ada gagasan bahwa kisi-kisi harus dibatasi pada tata letak utama, dan bahwa banyak kisi pada satu halaman mungkin bukan hal yang baik. Anda dapat memiliki kisi-kisi sebanyak yang Anda suka! Gunakan grid untuk hal-hal besar dan hal-hal kecil, jika masuk akal ditata sebagai grid maka gunakan Grid.

Penggantian Dan Mendukung Peramban Lama

“Grid yang digunakan bersama dengan @supports telah memungkinkan kami untuk lebih mengontrol jumlah variasi tata letak yang dapat kami lihat. Ini juga bekerja sangat baik dengan pendekatan peningkatan progresif kami yang berarti kami dapat memberi penghargaan kepada mereka yang memiliki browser modern tanpa mencegah akses ke konten bagi mereka yang tidak menggunakan teknologi terbaru.”

— Joe Lambert bekerja di rareloop.com

Dalam survei, banyak orang menyebutkan browser lama, namun, ada pemisahan yang cukup seimbang antara mereka yang merasa bahwa mendukung browser lama itu sulit dan mereka yang merasa mudah karena Feature Query dan fakta bahwa Grid mengesampingkan metode tata letak lainnya. Saya telah menulis panjang lebar tentang mekanisme pembuatan fallback ini di “Menggunakan CSS Grid: Mendukung Browser Tanpa Grid.”

Secara umum, browser modern jauh lebih dapat dioperasikan daripada rekan-rekan mereka sebelumnya. Kami cenderung melihat jauh lebih sedikit "bug browser" aktual dan jika Anda menggunakan HTML dan CSS dengan benar, maka biasanya Anda akan menemukan bahwa apa yang Anda lihat di satu browser sama dengan di browser lain.

Kami, tentu saja, memiliki situasi di mana satu browser belum mengirimkan dukungan untuk spesifikasi tertentu, atau beberapa bagian dari spesifikasi. Dengan Grid, kami sangat beruntung karena browser mengirimkan Tata Letak Grid dengan cara yang sangat lengkap dan dapat dioperasikan dalam waktu yang singkat satu sama lain. Oleh karena itu, pertimbangan kami untuk pengujian cenderung perlu menguji browser dengan Grid dan tanpa Grid. Anda mungkin juga telah memilih untuk menggunakan versi awalan -ms di IE10 dan IE11, yang kemudian akan memerlukan pengujian sebagai jenis browser ketiga.

Peramban yang mendukung Tata Letak Kotak modern (bukan versi IE) juga mendukung Kueri Fitur. Ini berarti Anda dapat menguji dukungan Grid sebelum menggunakannya.

Menguji Browser yang Tidak Mendukung Grid

Saat menggunakan fallback untuk browser tanpa dukungan untuk Tata Letak Kotak (atau menggunakan versi awalan -ms untuk IE10 dan 11), Anda perlu menguji bagaimana peramban tersebut merender Tata Letak Kotak. Untuk melakukan ini, Anda memerlukan cara untuk melihat situs Anda di browser contoh.

Saya tidak akan mengambil pendekatan untuk memecahkan Kueri Fitur Anda dengan memeriksa dukungan untuk sesuatu yang tidak masuk akal, atau salah mengeja grid nilai . Pendekatan ini hanya akan bekerja jika stylesheet Anda sangat sederhana, dan Anda benar-benar telah meletakkan segala sesuatu yang berkaitan dengan Tata Letak Kotak Anda di dalam Kueri Fitur. Ini adalah cara kerja yang sangat rapuh dan memakan waktu, terutama jika Anda menggunakan Grid secara ekstensif. Selain itu, browser lama tidak hanya akan kekurangan dukungan untuk Tata Letak Kotak, tetapi juga akan ada properti CSS lain yang tidak didukung. Jika Anda mencari "praktik terbaik" maka siapkan diri Anda sehingga Anda berada dalam posisi yang baik untuk menguji pekerjaan Anda di atas sana!

Ada beberapa cara mudah untuk mengatur diri Anda sendiri dengan metode yang tepat untuk menguji fallback Anda. Metode termudah — jika Anda memiliki koneksi internet yang cukup cepat dan tidak keberatan membayar biaya berlangganan — adalah dengan menggunakan layanan seperti BrowserStack. Ini adalah layanan yang memungkinkan tampilan situs web (bahkan yang sedang dikembangkan di komputer Anda) di seluruh host browser nyata. BrowserStack memang menawarkan akun gratis untuk proyek sumber terbuka.

Untuk menguji secara lokal, saran saya adalah menggunakan Mesin Virtual dengan browser target Anda diinstal. Microsoft menawarkan unduhan Mesin Virtual gratis dengan versi IE kembali ke IE8, dan juga Edge. Anda juga dapat menginstal ke VM versi browser yang lebih lama tanpa dukungan Grid sama sekali. Misalnya dengan mendapatkan salinan Firefox 51 atau di bawahnya. Setelah menginstal Firefox lama Anda, pastikan untuk mematikan pembaruan otomatis seperti yang dijelaskan di sini karena jika tidak, pembaruan akan diam-diam dengan sendirinya!

Anda kemudian dapat menguji situs Anda di IE11 dan di Firefox yang tidak mendukung pada satu VM (solusi yang jauh lebih rapuh daripada nilai salah eja). Persiapan mungkin memakan waktu sekitar satu jam, tetapi Anda akan berada di tempat yang sangat baik untuk menguji fallback Anda.

Melepaskan Kebiasaan Lama

“Ini pertama kalinya saya menggunakan Grid Layout, jadi ada banyak konsep yang harus dipelajari dan dipahami properti. Secara konseptual, saya menemukan hal yang paling sulit untuk melupakan semua hal yang telah saya lakukan selama bertahun-tahun, seperti membersihkan pelampung dan mengemas semuanya dalam wadah wadah.”

— Sembunyikan bekerja di hiddedevries.nl/en

Banyak orang yang menanggapi survei menyebutkan perlunya meninggalkan kebiasaan lama dan bagaimana mempelajari Tata Letak akan lebih mudah bagi orang yang benar-benar baru mengenal CSS. Saya cenderung setuju. Ketika mengajar orang secara langsung, pemula yang lengkap memiliki sedikit masalah dalam menggunakan Grid sementara pengembang berpengalaman berusaha keras untuk mengembalikan grid ke metode tata letak satu dimensi. Saya telah melihat upaya "sistem grid" menggunakan CSS Grid yang menambahkan kembali pembungkus baris yang diperlukan untuk grid berbasis float atau flex.

Jangan takut untuk mencoba teknik baru . Jika Anda memiliki kemampuan untuk menguji di beberapa browser dan tetap memperhatikan potensi masalah aksesibilitas, Anda benar-benar tidak bisa salah. Dan, jika Anda menemukan cara yang bagus untuk membuat pola tertentu, beri tahu semua orang tentangnya. Kami semua baru menggunakan Grid dalam produksi, jadi pasti ada banyak hal untuk ditemukan dan dibagikan.

“Grid Layout adalah pengembangan CSS yang paling menarik sejak kueri media. Ini telah dipikirkan dengan baik untuk kebutuhan pengembang dunia nyata dan merupakan kegembiraan mutlak untuk digunakan dalam produksi - untuk desainer dan pengembang.”

— Trys Mudford mengerjakan trysmudford.com

Sebagai penutup, berikut adalah daftar singkat praktik terbaik saat ini! Jika Anda telah menemukan hal-hal yang berhasil atau tidak bekerja dengan baik dalam situasi Anda sendiri, tambahkan ke komentar.

1. Berhati-hatilah dengan kemungkinan pemesanan ulang konten. Periksa apakah Anda belum memutuskan tampilan visual dari urutan dokumen.
2. Uji menggunakan browser target nyata dengan Mesin Virtual lokal atau jarak jauh.
3. Jangan lupa bahwa metode tata letak yang lebih lama masih valid dan berguna. Cobalah berbagai cara untuk mencapai pola. Jangan terpaku karena harus menggunakan Grid.
4. Ketahuilah bahwa sebagai pengembang front-end yang berpengalaman, Anda cenderung memiliki serangkaian prasangka tentang cara kerja tata letak. Cobalah untuk melihat metode baru ini secara baru daripada memaksanya kembali ke pola lama.
5. Terus mencoba hal-hal. Kita semua baru dalam hal ini. Uji pekerjaan Anda dan bagikan apa yang Anda temukan.