Cara Membuat Layout Kartu Menggunakan CSS Grid Layout

Catatan editor: Posting tamu ini ditulis oleh Abbey Fitzgerald seorang insinyur perangkat lunak UX dan desainer web yang menyukai seni membuat kode.

Tata Letak Kotak CSS mengubah cara kerja desainer web, memungkinkan cara yang lebih efisien untuk menata konten situs web.

Sudah lama ditunggu, tetapi akhirnya pendekatan ini benar-benar berhasil, dan dalam banyak kasus, sedang diproduksi. Ini merevolusi cara situs web dirancang dan begitu desainer memahaminya, ini akan memberi lebih banyak fleksibilitas pada tata letak web.

Jika Anda telah mencoba mendesain dengan CSS Grid dan telah melihat tutorial di web, Anda mungkin telah menemukan informasi yang berkaitan dengan pendekatan tata letak secara keseluruhan. Hal-hal seperti: header, konten, footer, dll.

Namun, CSS Grid juga dapat berguna untuk detail situs web lainnya, seperti kartu. Tata letak kartu adalah cara umum untuk menampilkan konten, dan dapat dibuat secara efisien dengan CSS Grid. Dengan menggunakan metode ini, area konten kartu dapat diulang dengan mudah, dapat dilihat di berbagai jenis perangkat, dan ukurannya mudah dikontrol.

Alat Tata Letak Kotak CSS

Saat Anda melanjutkan, Anda akan ingin memeriksa hal-hal di halaman. Firefox memiliki alat pengembang yang hebat untuk melihat area grid. Menggunakan alat pengembang Firefox, Anda dapat melihat overlay yang menguraikan kisi-kisi. Firefox Developer Edition juga memiliki kemampuan ini.

Pilih Overlay Grid yang ingin ditampilkan (tergantung desain Anda, bisa lebih dari satu). Pengaturan Tampilan Kisi memungkinkan Anda untuk melihat lebih dekat dengan menampilkan nomor baris, nama area, dan bagaimana Anda ingin garis diperpanjang. Ini akan sangat membantu saat Anda mendesain.

Kartu Sederhana Dengan Tata Letak Grid CSS

Jika Anda baru mengenal CSS Grid, Anda pasti ingin memoles dasar-dasarnya dan membuat Tata Letak Grid CSS sederhana. Kartu adalah cara yang bagus untuk menampilkan konten, serta elemen UI menarik yang intuitif untuk digunakan. Mereka juga menyediakan format yang bagus bagi pengguna untuk memindai konten dengan cepat dan terlibat dengan apa yang paling mereka minati. Kartu juga memungkinkan desainer memformat konten dengan cara yang menarik secara visual, dengan gambar yang bagus, konten intro, tautan, dan banyak lagi!

Kartu dan Tata Letak Halaman Keseluruhan

Selain itu, penting untuk diketahui bahwa CSS Grid tidak harus digunakan di seluruh tata letak halaman. Kisi dapat digunakan di area halaman tertentu jika diperlukan. Karena ini adalah tutorial tata letak kartu, pendekatan kisi dapat digunakan secara eksklusif di sini bahkan jika halaman lainnya tidak menggunakan CSS Grid. Selama area grid ditentukan dan display: grid; dideklarasikan pada pembungkus, pendekatan ini dapat digunakan.

Bekerja Dengan Set Jumlah Kartu

Dalam beberapa kasus, mudah untuk merencanakan sejumlah kartu. Dengan jumlah konten yang ditetapkan, jumlah kartu akan tetap sama. Misalnya, mungkin ada empat kartu yang menjelaskan penawaran bisnis, dengan masing-masing penawaran pada kartunya sendiri.

Untuk contoh ini (dan yang lainnya), semua item .card berada di dalam elemen penampung .cards . Untuk mencapai ini, itu cukup sederhana.

 [css] .cards { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-gap: 1rem; }   .card { border: 2px solid #e7e7e7; border-radius: 4px; padding: .5rem; } [/css]

Penting untuk menampilkan nilai .cards ke grid. Tanpa ini, area grid tidak dapat dibuat. Langkah selanjutnya adalah menentukan grid-template-columns dan memilih gaya. Penataan kartu yang sebenarnya akan dideklarasikan dengan kelas .card .

Dalam contoh ini, Anda akan melihat beberapa tag artikel dengan kelas .card . Lihat di Codepen.

Ulangi untuk Mengatur Jumlah Kartu

Di sinilah kartu mulai terbentuk. Untuk membuat jumlah kolom per baris yang lancar, repeat digunakan dengan fungsi repeat() . Fungsi ini membutuhkan dua argumen: berapa kali pengulangan dan nilai pengulangan.

Misalnya, grid-template-columns: repeat(3, 200px); menghitung ke grid-template-columns: 200px 200px 200px; .

Satuan Pecahan

Anda akan melihat bahwa kode contoh menggunakan “fr.” Apa itu tepatnya? Unit pengukuran ini menjadi populer dengan CSS Grid. Fr berarti “satuan pecahan” dan 1fr menempati 1 bagian dari ruang yang tersedia. Ini membantu menyederhanakan perhitungan ruang.

Unit pecahan dapat digunakan sendiri atau memungkinkan Anda menentukan lebar 1fr dan Anda juga dapat menambahkan elemen turunan. Beberapa fr akan dibagikan secara merata di semua elemen turunan.

Unit pecahan yang berbeda dapat ditentukan. Misalnya, ketika kolom kisi adalah 1fr 2fr 1fr , dua satuan pecahan menempati dua kali ruang sebagai satu satuan pecahan.

Ulangi untuk Jumlah Kartu Dinamis

Dalam beberapa kasus, Anda mungkin tidak mengetahui jumlah kartu yang dibutuhkan, jadi perencanaan untuk menetapkan nomor tidak akan berhasil. Pendekatan yang sama akan dilakukan dengan pengulangan tetapi ada opsi untuk menyesuaikan sebanyak yang diperlukan dengan pengisian otomatis.

 [css] grid-template-columns: repeat(auto-fill, 250px); [/css]

Deklarasi lebar diperlukan selain auto-fill . Perhatikan baik-baik, dengan nilai px, mungkin ada ruang kosong di sebelah kanan jika tidak cukup untuk memuat kartu, tetapi ini tidak harus demikian, seperti yang akan Anda lihat nanti.

Minmax untuk Kontrol Lebih Atas Lebar Kartu

Minmax adalah solusi sempurna, karena satuan pecahan dengan sendirinya akan membuat kartu menjadi lebar penuh. Menambahkan pengulangan dan minmax ke deklarasi gaya akan menghilangkan kemungkinan ruang kosong dan kartu akan tampak lebih cair.

 [css] grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); [/css]

Kolom akan selalu pas dengan kisi dan kartu setidaknya berukuran 200px. Ketika ruang minimum tidak sesuai dengan ruang, di sinilah lebar maksimal berperan. Ketika kartu dengan lebar 200px lainnya tidak muat, kartu lainnya akan berukuran lebih besar dari 200px, sehingga mereka meregang untuk mengisi baris dengan lebih banyak ruang dan akan didistribusikan secara merata. [artikel id=”21612″ align=”benar”]

Seluler

Karena kartu terkecil dan terbesar telah direncanakan, inilah saat yang tepat untuk membicarakan seluler. Kartu bekerja dengan baik pada perangkat yang lebih besar dan lebih kecil karena konten berada dalam potongan yang dapat dicerna, dan kartu dapat dengan mudah ditingkatkan dan diturunkan. CSS Grid membantu menciptakan pengalaman seluler yang luar biasa dan dalam beberapa kasus, ini jauh lebih mudah daripada memiliki kueri media terpisah.

Dalam contoh ini, ukuran kartu perlu diperkecil agar sesuai dengan perangkat seluler dan diperkecil menjadi sebagian kecil dari ruang yang tersedia, sehingga kartu tersebut tampak lebar penuh pada perangkat yang lebih kecil, tidak diperlukan kueri media terpisah:

 [css] grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); [/css]

Lebar minimum kartu adalah 300px. Sebanyak 300px kartu yang dapat ditampung akan muncul di baris. Saat perangkat sangat kecil, ada kemungkinan besar tidak ada ruang yang tersedia untuk dua kartu berturut-turut. Saat itulah 1fr ikut bermain. Unit pecahan sangat bagus untuk desain responsif. Ketika dua dari kartu 300px tidak muat, ini adalah tempat tampilan seluler menjadi sangat jelas. Ketika 1fr telah dinyatakan sebagai lebar maksimal, satu kartu akan mengambil semua ruang yang tersedia dan akan bertumpuk satu sama lain.

Celah Kisi

Sekarang setelah lebar kartu ditetapkan, keputusan untuk memiliki ruang di antara kartu perlu dibuat. Properti ini tersedia di wadah kisi dan memudahkan pembuatan talang dalam desain. Grid-column-gap menciptakan ruang di antara setiap kartu. Saat Anda melihat grid-gap , itu mengacu pada singkatan dari grid-row-gap dan grid-column-gap . Grid-row-gap adalah ruang di bagian atas dan bawah kartu, grid-column-gap adalah ruang di kiri dan kanan kartu.

Sumber Daya Tata Letak Kotak CSS

Ketika datang ke Tata Letak Grid CSS, ada banyak hal yang harus dipelajari dan ada banyak kemungkinan. Cara terbaik untuk mempelajari Tata Letak Kisi CSS adalah dengan membaca dan bereksperimen tambahan. Ada banyak sumber daya bagus di luar sana, tetapi berikut ini beberapa untuk Anda mulai:

• Kisi dengan Contoh
• Kursus Layout Grid CSS dari Wes Bos
• Pengantar Mozilla ke Kotak CSS