CSS тор касиеттеринин кыскача жазылышы

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

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

Мисал

Келгиле, 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: 600px;
	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: 600px;
	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: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Практикалык тапшырмалар

Төмөнкү мисалды ишке ашырыңыз: