От автора: галереи изображений на таких сайтах, как Unsplash , Pinterest и т.д., созданы с помощью методов позиционирования или перевода элемента изображения, которые являются очень сложными. Вы можете достичь того же очень быстро, зная, как делается в CSS Grid галерея. Например: Вверху находится галерея изображений с изображениями различной ширины и высоты, которая идеально подходит для CSS-сеток. Давайте приступим! Базовая сетка ...

От автора: макеты плитки, вероятно, являются наиболее распространенными макетами, которые мы создаем. Особенно для областей контента. И их никогда не было легче создать благодаря новой магии minmax и auto-fit, которая поставляется с CSS Grid. Lemme покажет вам новый и простой способ верстки идеальных, гибких макетов плитки с помощью CSS Grid. Плитки повсюду Вы можете узнать некоторые из них. Практически все ...

От автора: я представляю себе именованные области в CSS Grids, как привнесение собственного синтаксиса. Это строго не необходимо (вы можете выразить размещение сетки другими способами), но это может сделать это размещение более интуитивно понятным. И, эй, если я ошибаюсь, поправьте меня в комментариях. Возьмем за пример построение сеток CSS Grid с тремя столбцами: .grid { display: grid; grid-gap: 1rem; grid-template-columns: ...

От автора: разберем некоторые вопросы, которыми сопровождается построение сетки CSS. Предположим, у вас очень простой макет с одним столбцом в 300 пикселей, а другой занимает остальное пространство в 1fr. .grid { display: grid; grid-template-columns: 1fr 300px; } В определенном смысле это здорово. Этот столбец в 1fr займет оставшееся место, оставленное фиксированным столбцом в 300px. Это правда, что значение auto делает ...

От автора: некоторое время назад я написала хорошо принятую статью об объединении переменных CSS с CSS-сеткой, чтобы создавать более удобные макеты. Но CSS сетка предназначена не только для страниц! Это распространенный миф. Хотя это, безусловно, очень полезно для макетов страницы, я столь же часто вижу, что сетки можно использовать, когда речь идет о компонентах. В этой статье я рассмотрю использование ...

От автора: дни таблиц, маркерные хаки, магия позиционирования и неортодоксальные способы обтекания использовались для достижения желаний макета, и они, наконец, позади. Теперь у нас есть выбор, чтобы использовать самый мощный метод макета, который когда-либо приходил в CSS на сегодняшний день; Grid. Этот новый метод полностью изменяет подход к макетам для Web и, безусловно, самую важную спецификацию, когда-либо приземляющуюся в CSS. ...

От автора: в этом вводном уроке я расскажу вам об этой относительно новой функции CSS, расскажу о текущей поддержке в браузерах и покажу вам несколько примеров того, как работает CSS Grid Layout Module. Поскольку веб-приложения становятся все более сложными, нам нужен более естественный способ делать расширенные макеты без хакерских решений, которые используют обтекания и другие менее обременительные методы. Увлекательное новое ...

От автора: почему я начал использовать вместо BootStrap CSS Grid? BootStrap слишком длинный: нужно много div, даже если в макете всего пара блоков. С добавлением адаптивности все становится еще хуже… или когда нужно передвинуть блоки. Сетка BootStrap ограничена 12 колонками. По умолчанию в BootStrap padding равен 10 пикселей, и его сложно переписать. Пользователи обязаны загружать BootStrap, что замедляет сайт. Как ...

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

От автора: в начале года я работал над свойствами для разделителей CSS Grid Layout без префиксов. Свойства были названы grid-column-gap, grid-row-gap и сокращенная версия grid-gap. CSS Working Group (CSSWG) решила удалить grid-префикс CSS из этих свойств тем летом, чтобы их можно было расширить и использовать в других моделях макетирования типа Flexbox. Я не планировал писать пост об этом, но в ...