Postingan lainnya

Buku Ini Koding!

Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!

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.

css

@Liimalim

17 Kontribusi 1 Poin

Diperbarui 6 tahun yang lalu

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/

@tompradana

134 Kontribusi 95 Poin

Dipost 6 tahun yang lalu

okay terimakasih atas jawabannya