Saat menggunakan flex atau grid, kalian bisa mengatur jarak tiap item dengan menggunakan padding dan margin. Selain itu, kalian juga bisa menggunakan properti gap, column-gap, dan row-gap. Gap digunakan untuk mengatur jarak antar kolom maupun baris. Untuk mengatur jarak kolom, kalian bisa menggunakan column-gap. Jika jarak yang ingin kalian atur adalah jarak baris, maka kalian bisa menggunakan row-gap. Semua properti tersebut bisa digunakan pada flex maupun grid.
Properti-properti yang terkait dengan gap tidak mempengaruhi jarak item dari tepi kontainer. Kalian akan tetap memerlukan properti padding untuk melakukan itu.
<HTML>
<HEAD>
<TITLE>Belajar HTML</TITLE>
<style>
*{
box-sizing : border-box;
}
.kontainer_flex div {
color : red;
background : yellow;
border : solid 2px gold;
width : 20%;
margin : 0%;
}
.kontainer_flex {
height : 40%;
width : 100%;
display : flex;
flex-flow : row wrap;
justify-content : flex-end;
gap : 4px;
}
.kontainer_grid div {
color : gold;
background : green;
border : solid 2px gold;
}
.kontainer_grid {
height : 40%;
width : 100%;
display : grid;
grid-template-columns: 33.3% auto;
grid-template-rows : 67% auto;
row-gap : 2px;
column-gap : 8px;
}
</style>
</HEAD>
<BODY>
<H3>Flex</H3>
<section class="kontainer_flex">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
<div>
item4
</div>
</section>
<H3>Grid</H3>
<section class="kontainer_grid">
<div>
item1
</div>
<div>
item2
</div>
<div>
item3
</div>
<div>
item4
</div>
</section>
</BODY>
</HTML>
Saya menggunakan rata kanan pada flex dalam contoh di atas. Itu cuma keisengan saya saja. Kalau kalian mau menghilangkan perataannya, hapus saja properti justify-content. Hasilnya tentu saja akan berubah.
Daripada memusingkan itu, coba kalian perhatikan jarak kolom dan baris pada grid. Jaraknya terlihat berbeda karena perbedaan nilai properti column-gap dan row-gap. Kalian juga bisa melakukannya pada flex jika di dalamnya ada beberapa barisan. Pada contoh di atas, saya hanya menggunakan gap pada flex-box.