CSS Grid

CSS Grid – bu 2D layout tizimi bo‘lib, elementlarni qatorda ham, ustunda ham joylashtirish imkonini beradi. Flexbox faqat bitta o‘q bo‘yicha ishlasa, Grid esa to‘liq ikki o‘qli joylashuvni boshqaradi.

Asosiy Sintaksis

.container {
	display: grid;
}

Grid konteyner ichidagi barcha elementlar grid item hisoblanadi.

Asosiy property’lar (Konteyner)

1. `grid-template-columns` va `grid-template-rows`

Qator va ustunlarning tuzilishini belgilaydi.

.container {
	display: grid;
	grid-template-columns: 200px 1fr 2fr;
	grid-template-rows: 100px auto;
}

Qiymatlar:

px, %, fr (fraction – moslashuvchan ulush)

2. `gap`

Qator va ustunlar orasidagi bo‘shliq.

.container {
	display: grid;
	gap: 20px;
}

Shuningdek:

row-gap
column-gap

3. `repeat()` funksiyasi

Bir xil o‘lchamdagi ustun/qatorlarni tez belgilash.

.container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

4. `grid-template-areas`

Qator-ustunlarni nomlash orqali joylashtirish.

.container {
	display: grid;
	grid-template-areas:
		'header header'
		'sidebar content'
		'footer footer';
	grid-template-columns: 200px 1fr;
	grid-template-rows: auto 1fr auto;
}
 
.header {
	grid-area: header;
}
.sidebar {
	grid-area: sidebar;
}
.content {
	grid-area: content;
}
.footer {
	grid-area: footer;
}

Grid Item property’lari

1. `grid-column` va `grid-row`

Element qaysi ustun/qatorni egallashini belgilaydi.

.item1 {
	grid-column: 1 / 3; /* 1-ustundan 3-gacha */
	grid-row: 1 / 2;
}

2. `grid-area`

Elementni grid-template-areas nomi bilan joylashtirish.

.header {
	grid-area: header;
}

To‘liq Misol

<div class="container">
	<div class="header">Header</div>
	<div class="sidebar">Sidebar</div>
	<div class="content">Content</div>
	<div class="footer">Footer</div>
</div>
 
<style>
	.container {
		display: grid;
		grid-template-areas:
			'header header'
			'sidebar content'
			'footer footer';
		grid-template-columns: 200px 1fr;
		grid-template-rows: auto 1fr auto;
		gap: 10px;
	}
 
	.header {
		grid-area: header;
		background: lightblue;
	}
	.sidebar {
		grid-area: sidebar;
		background: lightgreen;
	}
	.content {
		grid-area: content;
		background: lightgray;
	}
	.footer {
		grid-area: footer;
		background: lightpink;
	}
</style>

Natija: Header yuqorida, sidebar chapda, content o‘ngda, footer pastda joylashadi.

Responsive Misol

.container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 20px;
}

Natija: Ekran o‘lchamiga qarab ustunlar soni avtomatik o‘zgaradi.

Afzalliklari

2D layoutni boshqarish.
Oddiyroq kod.
Moslashuvchan grid.
Responsivlik uchun ideal.

Xulosa

CSS Grid – bu murakkab layoutlarni sodda qilib tuzish uchun eng zamonaviy va kuchli vosita. Flexbox bilan birgalikda ishlatilganda, web layout dizayni ancha osonlashadi.

Grid

On this page