Всем привет и погнали. Допустим у нас есть следующий код:

<div class="container">
    <div>
        <p>Статье 1</p>
    </div>
    <div>
        <p>Статье 2</p>
    </div>
    <div>
        <p>Статье 3</p>
    </div>
    <div>
        <p>Статье 4</p>
    </div>
</div>

Здесь у нас в неком контейнере (container) расположены поочередно четыре элемента. Давайте их выделим с помощью свойства outline, чтобы удобнее было работать дальше.

.container div{
    outline:1px solid #f00;
    text-align:center;
}

И начнем работать со свойствами grid.

Первое что нам необходимо сделать это прописать свойству display нашего главного контейнера значение grid.

.container{
      display: grid;
 }

И дальше мы уже может работать с его свойствами. Допустим мы хотим выровнять все наши элементы в строку и задать им определенную ширину, причем каждому разную. Не вопрос.

.container{
     display: grid;
     grid-template-columns: 100px 200px 300px 400px;
 }

Здесь мы с помощью свойства grid-template-columns выровняли наши четыре элемента в строку и задали каждому из них свою ширину в порядке их очереди. Если мы хотим каждому элементу задать одинаковую ширину, то можем прописать так:

grid-template-columns: repeat(4, 300px);

тут в качестве значения мы воспользовались функцией repeat где указали количество элементов, в нашем случае это четыре, и их общую ширину.

Едем дальше. С помощью свойства grid-gap мы можем указывать отступы между элементами grid, к примеру.

.container{
     display: grid;
     grid-template-columns: repeat(4, 22%);
     grid-gap: 4%;
 }

Кто дружит с математикой я думаю меня поймет. То есть между элементами grid мы с помощью свойства grid-gap задали отступы равные в четыре процента от всей ширины контейнера.

При использовании свойств grid мы также можем пользоваться такой единицей измерения как fr, к примеру:

.container{
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-gap: 4%;
 }

здесь у нас все элементы с позиционируются в одну строку кроме последнего. То есть единица измерения fr растягивает элементы пропорционально на допустимую ширину.

.container{
     display: grid;
     grid-template-columns: 1fr 3fr 1fr 3fr;
     grid-gap: 4%;

 }

Все элементы расположены в одну строку причем четные элементы в три раза больше нечетных. Ну общую суть я думаю вы поняли.

Мы также пользуясь свойствами grid можем позиционировать наши элементы по вертикали:

.container{
     display: grid;
     grid-template-columns: 1fr 3fr 1fr 3fr;
     grid-gap: 4%;
     align-items: center;
     height:500px;
 }

В данном селекторе мы задали нашему контейнеру высоту 500px и выровняли в нем четыре элемента по центру высоты c помощью свойства align-items пришедшего от флексов(flex).

align-items: flex-start;//По вверху

align-items: center; //По центру

align-items: flex-end; //Понизу

Далее..

.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 4%;
    grid-template-rows: 250px 250px;
}

Здесь мы создали две колонки с четыремя элементами одинаковой высоты 250px. С помощью свойства grid-template-rows мы можем задавать высоту для каждой новой строки элементов.

То есть если мы зададим свойству grid-template-rows значение:

grid-template-rows: 250px 100px;

То у нас элементы первой строки будут высотой 250px, а элементы второй строки 100px. Здесь в принципе ничего сложного нет.

Теперь рассмотрим создание так называемого негативного пространства, то есть пустого.

div:first-child{
        grid-column-start:3;
    }

здесь мы нашему первому дочернему элементу div задали свойство grid-column-start со значением 3.

В результате в каждой строке у нас будет по три элемента, причем на месте первых двух элементов у нас будет пустое пространство, потому что слева от первого элемента ничего нет.

Давайте рассмотрим еще на примере второго элемента:

div:nth-of-type(2){
        grid-column-start:3;
    }

В данном случае у нас в первой строке будут располагаться первый элемент слева, пространство посередине и второй элемент справа. Есть и обратное свойство grid-column-end.

В общем если что то непонятно, можете самостоятельно поиграться с данным свойством на всех элементах.

Напоследок рассмотрим одну из самых полезных фишек данной технологии. А именно написание адаптивных свойств которые будут учитывать разрешение экрана и перестраивать позиционирование элементов при его изменении.

.container{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        grid-gap:10px;
    }

Теперь смотрим у радуемся как наши элементы при смене разрешения и сжатии перестраиваются. Это можно посмотреть просто увеличив разрешение с помощью горячей клавиши ctrl+ или через отладчик браузера. Только если смотрите через браузер не забудьте указать специальный мета тег медиа запросов: .

Как это работает? Здесь в свойстве grid-template-columns мы в качестве значения мы указали функцию repeat в качестве первого параметра мы ей передали специальное значение 'auto-fit' которое автоматически определает количество элементов в строке. Вторым аргументом мы пердаем функцию minmax в которой определены значения минимальной ширины и максимальной ширины элемента.

Сразу отмечу что помимо значения auto-fit данная конструкция может принимать auto-fill. Данное значение пытается поместить как можно больше элементов в строку, здесь также учитывается содержимое элементов. Если элемент не влезает в строку, то он автоматически переносится на следующую тем самым оставляя после себя пустое место.

Вот в принципе и все что я хотел вам рассказать. Я вам рассказал только самое основное, так как данная технология довольна обширна.

Так что все в ваших рукак.

На этом я с вами прощаюсь. Желаю успехов и удачи! Пока!