GridLesson 311Preview gratis
4 Column Layout
Lesson ini bagian dari How To · Semua level
Ringkasan
Tata letak empat kolom cocok untuk menampilkan layanan, fitur, atau produk dalam jumlah banyak secara ringkas. CSS Grid dengan repeat(4, 1fr) membagi ruang menjadi empat bagian sama lebar, sedangkan gap menjaga jarak antarkartu. Pada layar menengah jumlah kolom dikurangi menjadi dua, lalu satu kolom di ponsel.
Poin kunci
- Gunakan repeat(4, 1fr) untuk empat kolom sama lebar
- Kartu di dalam kolom sebaiknya memiliki padding dan tinggi yang konsisten
- Turunkan jumlah kolom pada breakpoint tablet dan ponsel
- Hindari teks panjang di kolom sempit karena sulit dibaca
- Gunakan gap agar jarak antaritem seragam
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.