Немного о GRID для новичков

Решил написать, может кому-нибудь будет интересно.

------------------ Немного Теории ------------------
​

Что такое CSS GRID ?
Вообще это модуль макета, который предлагает верстальщику систему на основе сеток с рядами и столбцами, что точно ускорит и упростит работу Вам. Тому-же вам не придется использовать позиционирования.

Макет сетки состоит из 2 компонентов:

• Родительский элемент.
• Один или несколько дочерних элементов. (Дочерний элемент - это элемент, который непосредственно располагается внутри родительского элемента.)

Все Дочерние элементы контейнера сетки (Родительские элементы) --> автоматически становятся "Элементами Сетки".

Однако, для того что-бы вам контейнер стал Элементом Сетки, то вам следует для этого контейнера в файле CSS, прописать всего одно свойство:

<div class="block-example">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

HTML

<div class="block-example">

  <div>1</div>

  <div>2</div>

  <div>3</div>

</div>

.block-example {
display: grid;
}

Код

.block-example {

   display: grid;

}

Или же вместо (display: grid), можно прописать свойство INLINE-GRID:

.block-example {
display: inline-grid;
}

Код

.block-example {

   display: inline-grid;

}

В чем же разница между GRID и INLINE-GRID свойством в CSS ?

Ну здесь все очень просто, и я опишу всё очень кратко: GRID - это свойство которое создает контейнер. А вот уже INLINE-GRID - это свойство которое создает грид-контейнер.

------------------ Шаблон -------------------​

Такие свойства как, GRID-TEMPLATE и GRID-TEMPLATE-ROWS, определяют количество столбцов и строк, ну а также ширину каждого столбца и строки в макете сайта.

.block-example {
display: grid;
grid-template-columns: auto 10px 10px // 3 колонки
grid-template-rows: 90px 90px // 2 ряда
}

Код

.block-example {

  display: grid;

  grid-template-columns: auto 10px 10px   // 3 колонки

  grid-template-rows: 90px 90px  // 2 ряда

}

А вот свойства такие как, GRID-COLUMN-GAP и GRID-ROW-GAP позволяют Вам настроить размеры места между столбцом и строками.

.block-example {
display: grid;
grid-column-gap: 39px;
grid-row-gap: 49px;
}

Код

.block-example {

  display: grid;

  grid-column-gap: 39px;

  grid-row-gap: 49px;

}

Однако, что-бы не прописывать выше написанные свойства все время, существует сокращение для обоих одно - GRID-GAP.

.block-example {
/* Было */
display: grid;
grid-column-gap: 30px;
grid-row-gap: 40px;

/* Cтало */
display: grid;
grid-gap: 40px 30px;
}

Код

.block-example {

  /* Было */

  display: grid;

  grid-column-gap: 30px;

  grid-row-gap: 40px;



  /* Cтало */

  display: grid;

  grid-gap: 40px 30px;

}

Надеюсь было интересно, если вдруг помогло, то буду еще писать маленькие статьи о HTML с СSS.