Cara membuat layout kartu menggunakan CSS Grid Layout

CSS Grid Layouts mengubah cara kerja desainer web, memungkinkan cara yang lebih efisien untuk menata konten situs web. Sudah lama ditunggu-tunggu, tetapi akhirnya pendekatan ini benar-benar lepas landas dan dalam banyak kasus, sedang dalam produksi. Ini merevolusi cara situs web dirancang dan setelah desainer memahaminya, itu akan memberikan lebih banyak fleksibilitas untuk 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 lain, 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 mudah diulang, 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. Di Firefox versi 52 di alat pengembang, Anda dapat melihat hamparan yang menguraikan kisi. Firefox Developer Edition juga memiliki kemampuan ini.

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

Kartu sederhana dengan Tata Letak Kotak 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 adalah 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 citra, konten intro, dan tautan yang hebat.

Kartu dan tata letak halaman keseluruhan

Sebagai tambahan, penting untuk diketahui bahwa CSS Grid tidak harus digunakan pada seluruh tata letak halaman. Kisi dapat digunakan di area halaman tertentu jika diperlukan. Karena ini adalah tutorial tentang tata letak kartu, pendekatan grid 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.

Saat Anda bekerja dengan sejumlah 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 ada di kartunya sendiri.

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

.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;

}

Sangat penting untuk menampilkan nilai .cards ke grid. Tanpa ini, area grid tidak dapat dibuat. Langkah selanjutnya adalah mendefinisikan grid-template-columns dan memilih styling. Gaya 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 yang cair per baris, repeat digunakan dengan fungsi repeat() . Fungsi ini membutuhkan dua argumen: berapa kali untuk diulang dan nilai untuk diulang.

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 sebenarnya? Unit pengukuran ini menjadi populer dengan CSS Grid. Fr berarti "satuan pecahan" dan 1fr mengambil 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 unit fraksional menempati dua kali ruang sebagai satu unit fraksional.

Ulangi untuk jumlah kartu yang dinamis

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

grid-template-columns: repeat(auto-fill, 250px);

Deklarasi lebar diperlukan selain auto-fill . Perlu diingat, dengan nilai px, mungkin ada ruang kosong di sebelah kanan jika tidak cukup untuk memasukkan kartu, tetapi hal ini tidak harus terjadi, seperti yang akan Anda lihat nanti.

Minmax untuk kontrol lebih besar 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.

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

Kolom akan selalu sesuai dengan kisi dan kartu setidaknya berukuran 200 piksel. Ketika ruang minimum tidak sesuai dengan ruang, di sinilah lebar maksimum berperan. Ketika kartu lebar 200px lainnya tidak muat, kartu lainnya akan lebih besar dari 200px, jadi kartu tersebut akan melebar untuk mengisi baris dengan lebih banyak ruang dan kartu tersebut akan didistribusikan secara merata.

Cara membuat situs WordPress Anda ramah seluler

Bukan rahasia lagi bahwa situs WordPress yang ramah seluler adalah norma baru, tetapi meskipun kelihatannya umum, masih perlu sedikit usaha untuk membuat situs yang indah dan responsif. Panduan ini...

Seluler

Karena kartu terkecil dan terbesar telah direncanakan, inilah saat yang tepat untuk berbicara tentang ponsel. Kartu berfungsi dengan baik pada perangkat yang lebih besar dan lebih kecil karena konten 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 yang terpisah.

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

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

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

celah kisi

Sekarang setelah lebar kartu ditetapkan, keputusan untuk memiliki ruang di antara mereka perlu dibuat. Properti ini tersedia di wadah kotak dan membuatnya mudah untuk membuat 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

CSS Grid Layouts relatif baru dalam desain web. Ada banyak hal untuk dipelajari dan ada banyak kemungkinan. Cara terbaik untuk mempelajari tentang Tata Letak Kotak CSS adalah dengan membaca dan bereksperimen tambahan. Ada banyak sumber daya yang bagus di luar sana, tetapi berikut adalah beberapa untuk Anda mulai:

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

Pengembang plugin WordPress suka

Menemukan plugin WordPress yang sempurna yang mempercepat pengembangan situs agak mirip dengan mencoba menemukan satu kesalahan ketik dalam serangkaian kode – ini bisa memakan waktu. Dan hari ini, ada begitu banyak plugin untuk tugas yang berbeda sehingga sulit untuk menentukan dengan tepat fungsionalitas apa yang dibutuhkan situs (atau tidak), dan plugin apa yang menyediakannya dengan cara yang efisien.

Unduh ebook ini untuk daftar plugin yang paling kami rekomendasikan untuk pengembang! Kami menemukan semua plugin ini mudah digunakan, tidak terlalu berat kinerjanya di situs Anda, dan benar-benar andal.

Siap memasang plugin favorit baru Anda? Mari selami!

Siap untuk tutorial CSS lainnya? Lihat ini!

• Cara menggabungkan kisi Flexbox dan CSS untuk tata letak yang efisien
• Cara menggunakan breakpoint CSS untuk membuat desain responsif
• Cara membuat animasi SVG dengan CSS