Grid häsiýeti
grid häsiýeti grid konteýneriniň ähli
sütün we hatar häsiýetleriniň gysgaça ýazgy görnüşidir.
Ähli bahalar bir setirde kesik çyzyk bilen ýazylýar.
grid bilen bir setirde diňe bir görnüşli häsiýetleri
görnüşi ýazyp bolýar - açyk-aýdyň
(grid-template-rows,
grid-template-columns,
grid-template-areas)
ýa-da açyk-aýdyň däl
(grid-auto-rows,
grid-auto-columns,
grid-auto-flow).
Görkezilmedik galan
häsiýetler öňünden bellänen
bahalaryny alýar.
Sintaksis
element {
grid: tor häsiýetleri;
}
Mysal
Geliň, grid häsiýetini ulanyp
bir tablisa düzeliň:
<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;
grid: 1fr 1fr 1fr / 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Indi bolsa, ikinji we üçünji hatarlara deň giňlik bereliň, her sütüne bolsa parh-parh giňlik bereliň:
<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;
grid: 60px 1fr 60px / 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Mysal
Indi bolsa, öňki mysaldaky tablisanyň ýokarky hataryna iki fraksiýa giňlik bereliň, birinji sütüne bolma bolsa ýarym fraksiýa giňlik bereliň:
<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;
grid: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Şeýle-de görüň
-
grid-templatehäsiýeti,
element üçin sütün we hatarlaryň sanyny we giňligini kesgitleýär -
grid-template-rowshäsiýeti,
griddeki hatarlaryň sanyny we giňligini kesgitleýär -
grid-template-columnshäsiýeti,
griddeki sütünleriň sanyny we giňligini kesgitleýär -
grid-template-areashäsiýeti,
elementleriň gridde ýerleşişini kesgitleýär -
grid-auto-flowhäsiýeti,
elementleriň tor üstünde awtomatiki ýerleşişini kesgitleýär