CSS Grid-ке киришүү

CSS Grid-тер элементтерди тегиздикте жана тикдикте бир эле учурда жайгаштыруунун ыкмасы. Бул флекс-боксторго салыштырмалуу андан ары өнүктүрүлгөн ыкма, бирок үйрөнүү үчүн бир аз татаалыраак.

Grid түзүү үчүн, элементке display касиетине grid маанисин берүү керек:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
}

Андан кийин элемент эки өлчөмдүү торго айланат, анда элементтер тикдикте (колонналар) жана тегиздикте (катарлар) жайгашат. Колонна менен катардын кесилишинен пайда болгон аймак торчо деп аталат.

Атайын касиеттердин жардамы менен элементтерди катарлар боюнча да, колонналар боюнча да жайгаштырууга болот. Бул, мисалы, төмөнкүдөй нерселерди жеңилдетет:

Кийинки сабактарда биз адегенде элементтерди колонналар боюнча жайгаштырууну үйрөнөбүз, андан кийин катарларды үйрөнүүгө өтөбүз, анан бардыгын бириктиребиз.