CSS gridlerinde sütün we hatarlaryň aralygy
gap aýratynlygy bilen
gridiň sütün we hatarlarynyň arasyndaky
aralygy bir wagtda belläp bolýar.
Ýa-da bir bahany, ýa-da iki bahany boşluk arkaly geçirip bolýar. Eger bir baha geçirilse, ol bir wagtda sütün we hatarlaryň arasyndaky aralygy bellaýar. Eger iki baha geçirilse, onda birinji hatarlaryň arasyndaky aralygy bellaýar, ikkinjisi bolsa sütünleriň arasyndaky aralygy bellaýar.
Mysal
Sütün we hatarlaryň arasynda deň aralyk belläliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
gap: 10px;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
padding: 10px;
border: 2px solid #696989;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Sütün we hatarlaryň arasynda dürli aralyklar belläliň:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
gap: 20px 10px;
grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
padding: 10px;
border: 2px solid #696989;
width: 600px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Amaly wezipeler
Sütün we hatarlaryň arasyndaky aralygy
10px bolan tablisa dörediň.
Sütün we hatarlaryň arasyndaky aralygy
10px we 5% bolan tablisa
dörediň.