Муқаддима ба CSS Grid

CSS Grid усули ҷойгир кардани элементҳо ҳамзамон ба ҳоризонтӣ ва амудӣ мебошад. Ин усули пешрафтатар нисбат ба Flex, вале мураккабтар барои омӯзиш аст.

Барои сохтани grid, бояд ба элемент хосияти display дар қимати grid дода шавад:

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

#parent {
	display: grid;
}

Пас аз ин, элемент ба торҳои дуҳаддии табдил меёбад, ки дар он элементҳо ба таври амудӣ (сутунҳо) ва ҳоризонтӣ (сатрҳо) ҷойгир мешаванд. Майдони дар буриши сутун ва сатр ячейка номида мешавад.

Бо ёрии хосиятҳои махсус метавон элементҳоро ҳам ба сатрҳо ва ҳам ба сутунҳо ҷойгир кард. Ин имкон медиҳад, ба осонӣ, масалан, чунин чизҳоро сохт:

Дар дарсҳои оянда мо аввал ҷойгир кардани элементҳоро дар сутунҳо меомӯзем, сипас ба омӯзиши сатрҳо мегузарем, ва баъд ҳамаи инро якҷоя менамоем.