Многие люди в восторге от CSS Grid и хотят изучить его. Вместе с тем многие из них очень заняты. Поэтому позвольте мне научить вас некоторым базовым вещам Сетки и потратить 5 минут вашего времени.
В отличие от Bootstrap или любых других подобных фреймворков, которые мы использовали в течение последнего десятилетия, CSS Grid не распространяется на всю страницу со всеми элементами на ней.
Вы определяете сетку для определенного элемента. Все прямые потомки этого элемента будут размещены на этой сетке. Ничего другого на странице не будет связано с ней.
Начните с определения того, какой блок будет Grid контейнером, и как структурировать вашу разметку, чтобы ваши Grid элементы были расположены как вы хотите.
Один пример:
1 2 3 4 5 |
<ul class="grid-container"> <li>grid item</li> <li>grid item</li> <li>grid item</li> </ul> |
Затем примените свойство сетки к вашему Grid контейнеру, в данном случае к <ul>
.
Какой самый простой способ определения сетки? Следующий CSS :
1 2 3 4 |
.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. Нужно лишь скопировать, вставить и воспроизвести.
Список упражнений 1
Упражнение 1 — Сделайте простую сетку
See the Pen Learn Grid — exercise 1 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 2 — Сделайте сетку с разными пропорциями
See the Pen Learn Grid — exercise 2 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 3 — Создайте адаптивную сетку
See the Pen Learn Grid — exercise 3 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 4 — Явное размещение предметов
See the Pen Learn Grid — exercise 4 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 8 — Сделайте простую сетку
See the Pen Learn Grid — exercise 8 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 9 — Поместите предметы на эту сетку
See the Pen Learn Grid — exercise 9 by Jen Simmons (@jensimmons) on CodePen.
Список упражнений 2
Упражнение 10 — Сделайте пункты перекрытия
See the Pen Learn Grid — exercise 10 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 11 — Сделайте все вместе
See the Pen Learn Grid — exercise 11 by Jen Simmons (@jensimmons) on CodePen.
Упражнение 5 — Сделайте определенные предметы сетки более крупными
See the Pen Learn Grid — exercise 5 by Jen Simmons (@jensimmons) on CodePen.
Список упражнений 3
Упражнение 6 — Автофлоу Spare и Dense
See the Pen Learn Grid — exercise 6 by Jen Simmons (@jensimmons) on CodePen.
See the Pen Learn Grid — exercise 7 by Jen Simmons (@jensimmons) on CodePen.