Похоже, что CSS Grid появился уже давно, но сейчас он, кажется, достигает точки, когда люди говорят о нем все больше и больше, и что мы должны изучать его. Я начал читать несколько постов и экспериментировать с синтаксисом в последние пару недель, но попросил своего коллегу по CSS-трикстеру Мириам Сюзанн поработать со мной на видеовстрече.
Мы потратили время на изучение самых основ CSS Grid и узнали, что начать его использовать гораздо менее страшно, чем мы ожидали. Мы начнем с простого примера, а затем изучим свойства CSS Grid, чтобы узнать, с чем еще он способен справиться, не заходя слишком далеко в сорняки.
Вот несколько ресурсов, которые мы упомянули во время нашего чата, на которые стоит ссылаться:
- Полное руководство по сетке - исчерпывающий обзор CSS-сетки, включая ее свойства и глоссарий важных терминов и концепций.
- Демонстрация CodePen - это простой пример, с которого мы начали в видео и продвигались дальше.
- CSS Grid и Grid Highlighter - этот инструмент был упомянут в конце, и он предоставляет способ визуализировать макет Grid с помощью Firefox DevTools.