Grid касиети

grid касиети тор контейнеринин баардык колонка жана катарынын касиеттеринин кыска түрүн түзөт. Баардык маанилер бир сапта кыйгач сызык аркылуу жазылат.

grid аркылуу бир сапта бир гана түрдөгү касиеттерди сүрөттөөгө болот - ачык түрдө (grid-template-rows, grid-template-columns, grid-template-areas) же жашыруун түрдө (grid-auto-rows, grid-auto-columns, grid-auto-flow). Көрсөтүлбөгөн касиеттер демейки маанини алат.

Синтаксис

элемент {
	grid: тордун касиеттери;
}

Мисал

grid касиетинин жардамы менен таблица түзөлү:

<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;
}

Мисал

Эми экинчи жана үчүнчү катарларга бирдей тууралык, ар бир колонкага ар кандай тууралык белгилейли:

<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;
}

Мисал

Эми мурунку мисалдагы таблицада жогорку катардын тууралыгын эки фракция, ал эми биринчи колонканын тууралыгын жарым фракция кылалы:

<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;
}

Ошондой эле караңыз

grid-template касиети,
ал элемент үчүн колонкалардын жана катарлардын санын жана тууралыгын белгилейт
grid-template-rows касиети,
ал тордогу катарлардын санын жана тууралыгын белгилейт
grid-template-columns касиети,
ал тордогу колонкалардын санын жана тууралыгын белгилейт
grid-template-areas касиети,
ал тордогу элементтердин жайгаштырылышын белгилейт
grid-auto-flow касиети,
ал тордогу элементтердин автоматтык жайгаштырылышын белгилейт