Многие люди в восторге от CSS Grid и хотят изучить его. Вместе с тем многие из них очень заняты. Поэтому позвольте мне научить вас некоторым базовым вещам Сетки и потратить 5 минут вашего времени.

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

Вы определяете сетку для определенного элемента. Все прямые потомки этого элемента будут размещены на этой сетке. Ничего другого на странице не будет связано с ней.

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

Один пример:

<ul class="grid-container">
    <li>grid item</li>
    <li>grid item</li>
    <li>grid item</li>
</ul>

</ul>

Затем примените свойство сетки к вашему Grid контейнеру, в данном случае к <ul>.

Какой самый простой способ определения сетки? Следующий CSS :

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

.grid-container {

display: grid;

grid-template-columns: 1fr 1fr 1fr 1fr;

}

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

Поиграть с этим CSS — один из лучших способов понять суть. Для упрощения я настроил все, что вам нужно в CodePen:

See the Pen Learn Grid — exercise 1 by Jen Simmons (@jensimmons) on CodePen.

Попробуйте. Добавьте еще 1fr в список и посмотрите, что произойдет. Измените один из них с 1fr на 2fr и посмотрите, что произойдет. Добавьте grid-gap: 1rem; чтобы сделать пространство 1rem между каждым столбцом.

Та да! Вот вы и используете CSS Grid.

Теперь, когда вы вошли во вкус, попробуйте пройти следующие базовые упражнения. Ответы находятся в панели JavaScript. Нужно лишь скопировать, вставить и воспроизвести.