Айқын Grid-тер

Grid жүйесі айқын және жасырын торларды қолдануды білдіреді. Осы түсініктерді толығырақ қарастырайық.

Айқын grid бағандар мен қатарлар бойынша орналасқан элементтер жиынтығы болып табылады. Көбінесе айқын тор қолмен жасалады және біз сізбен алдыңғы сабақтарда жасаған барлық 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-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}