Category: css grid

28
Июн
2019

CSS Grid Level 2 — subgrid вводится в Firefox

От автора: функция подсетки subgrid спецификации CSS Grid еще не реализована ни в одном браузере, но теперь она доступна для тестирования в Firefox Nightly. Это функция, которая, если вы использовали CSS Grid для макета любой сложности, скорее всего, вас очень порадует. В этой статье я собираюсь представить функцию и некоторые варианты ее использования. Так что […]

20
Июн
2019

Использование метода Grid Shepherd для упорядочивания данных с CSS

От автора: при работе с данными программисты часто не знают, правильно ли они отфильтрованы или отсортированы. Это особенно болезненно, когда вы перебираете массив, затем отображает данные на сайте, не зная местоположений каждого элемента, получающего их. Grid Shepherd — это метод, который помогает позиционировать и сортировать элементы там, где вы хотите, использовать CSS Grid вместо JavaScript. […]

24
Май
2019

Создание адаптивного макета сетки CSS Grid без медиа-запросов

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

11
Май
2019

CSS Grid — обязательный инструмент для современной верстки

От автора: привет, друзья! В данной статье поговорим про последнее глобальное новшество в верстке — CSS Grid Layout. Оно обладает действительно фантастическими возможностями и позволяет делать то, что раньше в таблице каскадных стилей сделать было просто невозможно. Давайте сегодня разберем, что такое CSS Grid, рассмотрим его основные преимущества и функционал. Основная информация Grid Layout — […]

06
Май
2019

Новости и демо-версии CSS Subgrid

От автора: пару недель назад я выступал на Frontend NE в Ньюкасле, большая часть моего выступления была посвящена тому, что будет содержать функция Subgrid CSS из Grid Level 2. Не имея готовой реализации для этого выступления, я смоделировал кучу демо-версий, используя DevTools. По пути в Сан-Франциско на Smashing Conf, где я проводил семинар по CSS […]

03
Апр
2019

Как начать работу с CSS Grid: подробное руководство

От автора: больше похоже на мое медленное продвижение в процессе изучения CSS Grid, руководство просто звучит круче. Когда я заканчиваю свой 10-ый CSS Grid pen* (моя 10-я годовщина, если хотите), я думаю, что могла бы также изложить (ха!) некоторые свои мысли. Может быть, кому-то эти заметки пригодятся? Начало работы Мне всегда становится боязно перед тем, […]

21
Мар
2019

Стоит ли использовать CSS Grid и как убедить в этом свою команду

От автора: вы стремитесь перейти на CSS Grid Layout, но не можете убедить остальных членов команды (ваших коллег или менеджеров)? Кто-то недавно спросил меня, что я могу посоветовать скептически настроенной команде, чтобы они приняли CSS Grid в свой рабочий процесс. Хотя я сам не сталкивался с какими-либо серьезными препятствиями, эту историю я слышу слишком часто. […]

12
Мар
2019

Никаких медиа-запросов! Верстка адаптивных макетов с CSS Grid

От автора: CSS Grid не только изменил то, как мы понимаем и строим макеты для Интернета, но также способствовал написанию более гибкого кода, заменив «хакерские» методы, которые мы использовали ранее, а в некоторых случаях убив необходимость полагаться на код для конкретных разрешений и окон присмотра. Что самое крутое на этом этапе эпохи веб-разработки, так это […]

08
Мар
2019

Правильная верстка CSS Grid

От автора: CSS Grid — это стабильная, гибкая и современная парадигма, которая пришла на смену другим системам верстки CSS. В то время, как эти характеристики способствуют принятию Grid, они также затрудняют ее изучение. Верстка Grid CSS требует практического освоения многих новых свойств, которые не только описывают один аспект внешнего вида или поведения, но и вводят […]

05
Мар
2019

Построение явной и неявной сетки CSS

От автора: В этой статье объясняется разница между явными и неявными сетками в CSS Grid. CSS grid layout использует концепцию явной и неявной сетки. Построение сеток CSS без нее не обходится. Это ключевая концепция, которую вы должны знать, иначе вы можете получить кучу строк или столбцов, которых не ожидали! Явные и неявные сетки Явная сетка […]

04
Мар
2019

Создание адаптивной сетки CSS

Разметка сетки предоставляет ключевые слова auto-fill и auto-fit, которые позволяют создать сетку с таким количеством треков определенного размера, который будет соответствовать контейнеру.

01
Мар
2019

Создание макета сайта с помощью CSS Grid

От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами. Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. […]

01
Мар
2019

Создание сетки CSS Grid

От автора: Рассмотрим создание сетки CSS Grid 3х3 с небольшим зазором между треками сетки. Мы создадим базовую сетку, которая выглядит следующим образом: Базовая сетка 3х3 (3 ряда и 3 колонки). Вот код: [crayon-5c78fe7c40100671209354/] Давайте внимательнее рассмотрим этот код. HTML-разметка для сетки выглядит следующим образом: [crayon-5c78fe7c40107996919349/] Так что это обычный фрагмент HTML, состоящий из элементов, вложенных […]

01
Мар
2019

Введение в CSS Grid Layout

От автора: CSS grid layout — это новая модель макета, оптимизированная для двумерных макетов. Она идеально подходит для веб-сайтов, форм, галерей изображений и всего, что требует точного и гибкого позиционирования. CSS включает в себя множество свойств, которые могут помочь с макетом сайта. Но до начала 2017 года в CSS не было механизма создания двухмерных макетов […]

28
Фев
2019

В чем разница между Flexbox и Grid CSS?

От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, […]

21
Янв
2019

Как создать галерею изображений с помощью CSS Grid

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