Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

Grid’ni tekislash

ULASHISH

CSS Grid konteyneri — kontentni tekislash

Grid konteyner ichida grid kontentning tekislashini quyidagi xossalar bilan belgilashingiz mumkin:

  • justify-content — grid kontent asosiy o‘q (gorizontal) bo‘sh maydonining hammasini ishlatmasa, uni tekislaydi
  • align-content — grid kontent ko‘ndalang o‘q (vertikal) bo‘sh maydonining hammasini ishlatmasa, uni tekislaydi
  • place-content — align-content va justify-content uchun qisqartma xossasi

CSS justify-content xossasi

justify-content xossasi grid kontent asosiy o‘q (gorizontal) bo‘sh maydonining hammasini ishlatmasa, uni tekislash uchun ishlatiladi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

Eslatma: justify-content xossasi ta’sir qilishi uchun grid kontentning umumiy kengligi konteyner kengligidan kichik bo‘lishi kerak.

Misol

space-evenly qiymati grid elementlarni atrofida teng bo‘shliq bilan ko‘rsatadi:

.container {
  display: grid;
  justify-content: space-evenly;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

space-around qiymati grid elementlarni atrofida bo‘shliq bilan ko‘rsatadi:

.container {
  display: grid;
  justify-content: space-around;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

space-between qiymati grid elementlarni oralig‘ida bo‘shliq bilan ko‘rsatadi:

.container {
  display: grid;
  justify-content: space-between;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

center qiymati grid elementlarni konteyner markaziga joylashtiradi:

.container {
  display: grid;
  justify-content: center;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

start qiymati grid elementlarni konteyner boshiga joylashtiradi:

.container {
  display: grid;
  justify-content: start;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

end qiymati grid elementlarni konteyner oxiriga joylashtiradi:

.container {
  display: grid;
  justify-content: end;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

CSS align-content xossasi

align-content xossasi grid kontent ko‘ndalang o‘q (vertikal) bo‘sh maydonining hammasini ishlatmasa, uni tekislash uchun ishlatiladi.

Bu xossa quyidagi qiymatlardan biriga ega bo‘lishi mumkin:

  • space-evenly
  • space-around
  • space-between
  • center
  • start
  • end

Eslatma: align-content xossasi ta’sir qilishi uchun grid kontentning umumiy balandligi konteyner balandligidan kichik bo‘lishi kerak.

Quyidagi misollarda align-content xossasini yaxshiroq ko‘rsatish uchun 300 piksel balandlikdagi konteynerdan foydalanamiz.

Misol

center qiymati grid elementlarni konteyner o‘rtasiga joylashtiradi:

.container {
  display: grid;
  height: 300px;
  align-content: center;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

space-evenly bilan grid chiziqlari grid konteynerda teng taqsimlanadi — yuqori, past va orasida teng bo‘shliq bilan:

.container {
  display: grid;
  height: 300px;
  align-content: space-evenly;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

space-around bilan grid chiziqlar orasidagi bo‘shliq teng bo‘ladi, lekin birinchi grid elementdan oldingi va oxirgi grid elementdan keyingi bo‘shliq grid chiziqlar orasidagi bo‘shliqning yarmiga o‘rnatiladi:

.container {
  display: grid;
  height: 300px;
  align-content: space-around;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

space-between bilan grid chiziqlar orasidagi bo‘shliq teng bo‘ladi, lekin birinchi grid element konteyner bosh chetiga yopishgan va oxirgi grid element konteyner oxir chetiga yopishgan bo‘ladi:

.container {
  display: grid;
  height: 300px;
  align-content: space-between;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

start qiymati grid elementlarni konteyner boshiga joylashtiradi:

.container {
  display: grid;
  height: 300px;
  align-content: start;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

end qiymati grid elementlarni konteyner oxiriga joylashtiradi:

.container {
  display: grid;
  height: 300px;
  align-content: end;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

CSS place-content xossasi

place-content xossasi align-content va justify-content xossalarining qisqartmasidir.

Agar place-content ikkita qiymatga ega bo‘lsa:

  • place-content: start center; — align-content qiymati 'start' va justify-content qiymati 'center'

Agar place-content bitta qiymatga ega bo‘lsa:

  • place-content: end; — align-content va justify-content qiymatlari ikkalasi 'end'

Eslatma: place-content xossasi ta’sir qilishi uchun grid elementning umumiy balandligi va kengligi konteyner balandligi va kengligidan kichik bo‘lishi kerak.

Misol

center qiymati grid elementlarni konteyner o‘rtasiga (vertikal ham, gorizontal ham) joylashtiradi:

.container {
  display: grid;
  height: 300px;
  place-content: center;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »

Misol

end space-between qiymati grid chiziqlarini grid konteyner pastiga tekislaydi va grid elementlarni orasida bir xil bo‘shliq bilan gorizontal tekislaydi:

.container {
  display: grid;
  height: 300px;
  place-content: end space-between;
}

Natija:

1
2
3
4
5
6

O‘zingiz sinab ko‘ring »


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish