CSS-тегінің ішкі торлары

Ішкі тор - кірістірілген тордың бір нұсқасы, бірақ одан айырмашылығы ол ата-ана тор контейнерінің өлшеміне әсер етеді. Ішкі торды орнату үшін түпнұсқа элементте қасиетін орнату керек display subgrid мәнімен.

Мысал ретінде төртінші элементте кірістірілген тор жасайық:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">
		<div>5</div>
		<div>6</div>
		<div>7</div>
		<div>8</div>
	</div>
</div>

#parent {
	display: grid;
	grid-template: 1fr 1fr / 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 200px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem4 {
	display: subgrid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	grid-gap: 5px;
	border: 2px solid #696989;
	padding: 5px;
}
#elem4 > div {
	grid-gap: 5px;
	padding: 6px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Сізде екі бағанда орналасқан бес элементтен тұратын тор бар делік. Үшінші элементте кірістірілген тор жасаңыз, онда өз кезегінде екі түпнұсқа элемент болады.

Алдыңғы тапсырманы өзгертіңіз, кірістірілген торда төрт түпнұсқа элемент болуы керек.

Екі кірістірілген тор жасаңыз - екінші элементте және бесінші элементтерде.