Увядзенне ў CSS грідкі

CSS грідкі ўяўляюць сабой спосаб размясціць элементы адначасова і па гарызанталі, і па вертыкалі. Гэта больш прасунуты спосаб у параўнанні з флексамі, але больш складаны для асваення.

Каб зрабіць грідку, трэба задаць элементу ўласцівасць display у значэнні grid:

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

css#parent {
  display: grid;
}

Пасля гэтага элемент ператворыцца ў двухмерную сетку, у якой элементы размяшчаюцца па вертыкалі (слупкі) і гарызанталі (рады). Вобласць пры перасячэнні слупка і рада называецца ячэйкай.

З дапамогай спецыяльных уласцівасцей можна будзе размяшчаць элементы і па радах, і па калонках. Гэта дазволіць лёгка рабіць, напрыклад, вось такія штукі:

У наступных уроках мы спачатку вывучым размяшчэнне элементаў па слупках, затым перайдзем да вывучэння радоў, а пасля аб'яднаем усё гэта разам.