Grid
Grid so'zi panjara, setka degan ma'noni anglatadi.
Grid veb saxifada elementlarni joylashtirish imkoniyatini beradi.
Ya'ni grid veb saxifani kataklar bo'lishda yordam berib, anashu
kataklarga elementlarni joylashtirishimzga imkon beradi.
Grid
Griddan foydalanish uchun birinchi grid qutisini tuzishimiz kerak
Va uni grid qutisiga aylantirish uchun display xususiyatiga grid
deb yozishimiz kerak.
<div class=”grid-qutisi”>
</div>
.grid-qutisi {
display: flex
}
Grid qutisi misol
<div class=”grid-qutisi”>
<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>10</div>
<div>11</div>
<div>12</div>
</div>
Grid qatorlar va ustunlar
Ustun 1
Ustun 2
Ustun 3
Ustun 4
Qator 1
1
2
3
4
Qator 2
5
6
7
8
Qator 3
9
10
11
12
grid-column va grid-row
column-gap
row-gap
1
2
3
4
5
6
7
8
9
10
11
12
grid-template-columns
grid-template-columns xususiyati grid container nechta
ustundan iborat bo’lishi va ustunlarni kengligi (width) ni qancha
bo’lishi kerakligini bildiradi. Ya'ni grid da ustunlar sonini va
ularning kengligini (width) ko'rsatish uchun shu xususiyatdan
foydalanamiz.
grid-template-rows
grid-template-rows xususiyati har bir qatorning balandligini
(height) belgilaydi.
Grid
<div class=”grid-qutisi”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.grid-qutisi {
display: grid;
grid-template-columns: 100px 150px 200px;
grid-template-rows: 200px 150px 100px;
}
justify-content
space-betwee
space-aroun
space-evenl
center
justify-content: space-between
<div class=”grid-qutisi”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.grid-qutisi {
display: grid;
grid-template-columns: 100px 150px 200px;
grid-template-rows: 200px 150px 100px;
justify-content: space-between;
}
align-content
cente
space-evenl
space-aroun
space-betwee
en
start
align-content: space-between
<div class=”grid-qutisi”>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
.grid-qutisi {
display: grid;
grid-template-columns: 100px 150px 200px;
grid-template-rows: 200px 150px 100px;
justify-content: space-between;
align-content: space-between;
}