Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Gimana caranya membuat grid yang benar?
sy mau tanya soal css, sy membuat grid dengan flex, ketika sy bagi 50% dengan 4 kolom, kolomnya malah kesamping, gimana caranya ketika kolomnya lebih dari dua itu langsung otomatis kebawah ?
terimakasih.
2 Jawaban:
Jawaban Terpilih
Halo.
Jangan sekali kali membuat GRID dengan Flexbox, karena GRID dan FLEXBOX adalah dua hal yang sama sekali berbeda.
Grid merupakan 2-demensial system dimana bisa menghandle row dan column sekaligus. Berbeda dengan flexbox yang hanya 1-dimensial system saja.
Saya kasih contoh, membuat 2 kolom dan 2 row (4 kotak grid)
HTML nya
<pre> <div class="content-grid"> <div class="grid-item">Lorem Ipsum</div> <div class="grid-item">Lorem Ipsum</div> <div class="grid-item">Lorem Ipsum</div> <div class="grid-item">Lorem Ipsum</div> </div> </pre>
CSS nya
<pre> .content-grid { display: grid; grid-template-columns: 49% 49%; grid-column-gap: 2%; grid-row-gap: 12px; }
.content-grid .grid-item { width: 100%; border: 1px solid #222; box-shadow: 0 0 5px rgba(0, 0, 0, .25); } </pre>
Untuk referensi lengkap Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Untuk referensi lengkap Grid: https://css-tricks.com/snippets/css/complete-guide-grid/