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.

avatar Liimalim
@Liimalim

17 Kontribusi 1 Poin

Diperbarui 5 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> &lt;div class="content-grid"&gt; &lt;div class="grid-item"&gt;Lorem Ipsum&lt;/div&gt; &lt;div class="grid-item"&gt;Lorem Ipsum&lt;/div&gt; &lt;div class="grid-item"&gt;Lorem Ipsum&lt;/div&gt; &lt;div class="grid-item"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; </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/

avatar tompradana
@tompradana

134 Kontribusi 95 Poin

Dipost 5 tahun yang lalu

okay terimakasih atas jawabannya

avatar Liimalim
@Liimalim

17 Kontribusi 1 Poin

Dipost 5 tahun yang lalu

Login untuk ikut Jawaban