Grid bilan tanishuv

CSS Grid maket moduli

Grid Layout moduli qatorlar va ustunlar bilan to‘r asosidagi maket tizimini taklif qiladi.

Grid Layout moduli dasturchilarga murakkab veb-maketlarni oson yaratish imkonini beradi.

Grid Layout moduli float yoki joylashtirishdan foydalanmasdan moslashuvchan maket strukturasini loyihalashni osonlashtiradi.

Lorem Ipsum

Lorem ipsum odor amet, consectetuer adipiscing elit. Ridiculus sit nisl laoreet facilisis aliquet. Potenti dignissim litora eget montes rhoncus sapien neque urna. Cursus libero sapien integer magnis ligula lobortis quam ut.

O‘zingiz sinab ko‘ring »

Grid va Flexbox solishtiruvi

CSS Grid qatorlar VA ustunlar bilan ikki o‘lchamli maket uchun ishlatiladi.

CSS Flexbox qatorlar YOKI ustunlar bilan bir o‘lchamli maket uchun ishlatiladi.

CSS Grid komponentlari

Grid har doim quyidagilardan iborat:

Grid konteyner — ota (konteyner) element bo‘lib, unda display xossasi grid yoki inline-grid qilib belgilanadi
Bir yoki bir nechta grid element — grid konteynerning to‘g‘ridan-to‘g‘ri bola elementlari avtomatik ravishda grid elementlarga aylanadi

Besh grid elementli grid konteyner

Quyidagi element besh grid elementli grid konteynerni (ko‘k maydon) ifodalaydi.

Misol

Besh grid elementli grid konteyner:

<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: dodgerblue;
padding: 10px;
}
.container div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>

<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>

</body>
</html>

O‘zingiz sinab ko‘ring »

Eslatma: Grid konteynerlar va grid elementlar haqida keyingi boblarda ko‘proq bilib olasiz.

CSS Grid xossalari

Xususiyat	Tavsif
align-content	Butun gridni konteyner ichida vertikal tekislaydi (gridning umumiy o‘lchami konteynerdan kichik bo‘lganda)
align-items	Flexbox yoki panjara konteyneridagi elementlar uchun standart hizalanishni belgilaydi
align-self	Ustun o‘qi bo‘ylab ma’lum bir panjara elementi uchun tarkibni tekislaydi
display	Elementning ko‘rsatilish xatti-harakatini (render qilish qutisi turini) belgilaydi
column-gap	Ustunlar orasidagi bo‘shliqni belgilaydi
gap	Qator oralig‘i va ustun bo‘shlig‘i xususiyatlari uchun qisqartma xususiyat
grid	grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns va grid-auto-flow xossalari uchun qisqartma (shorthand) xossasi
grid-area	Yoki to‘r elementi nomini belgilaydi yoki bu xususiyat grid-row-start, grid-column-start, grid-row-end va grid-column-end xususiyatlari uchun qisqartma xususiyatdir.
grid-auto-columns	Standart ustun o‘lchamini belgilaydi
grid-auto-flow	Avtomatik joylashtirilgan elementlar to‘rga qanday kiritilishini belgilaydi
grid-auto-rows	Standart qator o‘lchamini belgilaydi
grid-column	Grid-ustun-boshi va panjara-ustun-oxiri xususiyatlari uchun stenografiya xususiyati
grid-column-end	To‘r elementining tugash joyini belgilaydi
grid-column-start	To‘r elementini qaerdan boshlash kerakligini belgilaydi
grid-row	grid-row-start va grid-row-end xususiyatlari uchun qisqartma (shorthand) xususiyat
grid-row-end	To‘r elementining tugash joyini belgilaydi
grid-row-start	To‘r elementini qaerdan boshlash kerakligini belgilaydi
grid-template	To‘r-shablon-stringlar, panjara-shablon-ustunlar va to‘r-maydonlar xususiyatlari uchun stenografiya xususiyati
grid-template-areas	Nomlangan panjara elementlaridan foydalangan holda ustunlar va stringlarni qanday ko‘rsatishni belgilaydi
grid-template-columns	Ustunlar o‘lchamini va to‘r tartibida nechta ustunni belgilaydi
grid-template-rows	To‘r tartibidagi qatorlar o‘lchamini belgilaydi
justify-content	Butun gridni konteyner ichida gorizontal tekislaydi (gridning umumiy o‘lchami konteynerdan kichik bo‘lganda)
justify-self	Muayyan panjara elementi uchun tarkibni qator o‘qi bo‘ylab tekislaydi
place-self	Align-self va justify-self xususiyatlari uchun qisqartma xususiyat
place-content	Align-content va justify-content xususiyatlari uchun stenografiya xususiyati
row-gap	To‘r qatorlari orasidagi bo‘shliqni belgilaydi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish