Аниқ гридлар

Грид тизими аниқ ва носиқ торлардан фойдаланишни назарда тутади. Келинг, бу тушунчаларни батафсилрок кўриб чиқайлик.

Аниқ грид устун ва қаторлар бўйича жойлаштирилган элементлар тўпламидан иборат. Кўпинча аниқ тор қўлда яратилади ва биз сиз билан олдинги дарсликларда яратган барча гридлар аниқдир (масалан, гридда плитка дарслиги).

Келинг, бизнинг аниқ гридимиз бўладиган таблица яратайлик:

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