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

Практикалық тапсырмалар

Келесі мысалды жүзеге асырыңыз: