10 удобных фрагментов кода CSS Grid

Спецификация сетки CSS не то чтобы «нова», но она определенно новее в основном мире разработчиков. Многие фронтенд-кодеры еще даже не знают о свойствах сетки CSS, не говоря уже о том, как они применяются к интерфейсу.

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

Эта коллекция должна предложить множество ресурсов, которые помогут вам изучить, настроить и изменить стиль сеток CSS для всего, что вы делаете в Интернете.

1. Герой-блок с несколькими изображениями

Давайте начнем с этого действительно классного блока героев, разработанного со свойствами сетки. Этот дизайн имитирует главный раздел изображения главной страницы, который вы найдете на многих веб-сайтах в журнальном стиле.

Разработчик Рэйчел Эндрю создала это, используя немного пользовательского CSS из своих собственных проектов. Он работает невероятно хорошо, а дизайн полностью реагирует на загрузку.

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

Это отличный ресурс для изучения сеток CSS и удобный фрагмент кода для тех, кто кодирует тему блога в стиле журнала.

2. Макет сетки CSS

Свойство grid-auto-flow полностью отображается в этой демонстрации с использованием «плотной» настройки. Это заставляет элементы сжиматься ниже на странице по мере изменения размера сетки.

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

Если вы не уверены, что делает этот код, просто помните: Google — ваш друг! Множество отличных сообщений и потоков Stack Overflow, охватывающих всю эту настройку.

3. Не очень жуткие факты о тыкве

Вот довольно крутой фрагмент, созданный с некоторыми основными фактами о тыкве. Что ж, факты о тыквах организованы в виде сетки CSS.

Код на самом деле работает на SCSS/Sass, а это означает, что вам потребуется некоторое знакомство с языком, чтобы вникать в него. Но вы также можете скомпилировать код Sass в необработанный CSS прямо внутри CodePen, если хотите увидеть основные свойства.

Одна из моих любимых вещей в этом дизайне — это цвет и типографика. Это действительно кричит о Хэллоуине со значком тыквы и всеми этими оттенками желтого / оранжевого.

4. Автоматическая шестиугольная компоновка

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

Вы заметите, что элементы шестиугольной формы переформатируются, чтобы соответствовать странице. Вероятно, это лучший способ обработки сложных страниц с большим количеством фотографий. Я часто вижу этот тип макета на веб-сайтах конференций и страницах «о нас» для компаний с большим количеством сотрудников.

Теперь, благодаря структуре сетки CSS, вам не нужно беспокоиться о адаптивных стилях вручную. И этот фрагмент кода — лучшее место для начала планирования подобного макета.

5. Покедекс в CSS Grid

Я еще не видел ничего столь же креативного, как этот Pokedex в сетке CSS. Он использует HTML и CSS с небольшим количеством JavaScript для автоматического заполнения размеров ячеек.

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

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

6. Простая сетка

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

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

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

7. CSS Grid с откатом Flexbox

Не все браузеры догнали структуру сетки CSS. Вот почему этот фрагмент кода научит вас создавать собственную сетку CSS, используя flexbox (и float) в качестве запасного варианта.

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

Я бы не назвал это идеальным запасным решением, но это определенно лучше, чем ничего.

8. Демонстрация терминологии сетки

Не уверены во всей этой запутанной терминологии сетки CSS? Тогда этот фрагмент может помочь прояснить ситуацию.

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

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

9. Использование столбцов сетки-шаблона: repeat()

Для очень конкретного примера свойства grid-template-columns взгляните на эту живую демонстрацию. Он показывает вам, как использовать функцию повтора вместо того, чтобы объявлять одно и то же значение столбца несколько раз в вашем CSS.

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

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

10. Кроссворд с сеткой на чистом CSS

Чтобы закончить на забавной ноте, взгляните на чистый кроссворд Адриана Роуорта CSS. Весь этот макет построен только на коде HTML и CSS, в частности, на свойствах сетки CSS для структуры макета.

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

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