От автора: больше похоже на мое медленное продвижение в процессе изучения CSS Grid, руководство просто звучит круче. Когда я заканчиваю свой 10-ый CSS Grid pen* (моя 10-я годовщина, если хотите), я думаю, что могла бы также изложить (ха!) некоторые свои мысли. Может быть, кому-то эти заметки пригодятся? Начало работы Мне всегда становится боязно перед тем, как сделать первый шаг, попробовать ...
Читать далее »
От автора: вы стремитесь перейти на CSS Grid Layout, но не можете убедить остальных членов команды (ваших коллег или менеджеров)? Кто-то недавно спросил меня, что я могу посоветовать скептически настроенной команде, чтобы они приняли CSS Grid в свой рабочий процесс. Хотя я сам не сталкивался с какими-либо серьезными препятствиями, эту историю я слышу слишком часто. Несмотря на то, что разочаровывает, ...
Читать далее »
От автора: CSS Grid не только изменил то, как мы понимаем и строим макеты для Интернета, но также способствовал написанию более гибкого кода, заменив «хакерские» методы, которые мы использовали ранее, а в некоторых случаях убив необходимость полагаться на код для конкретных разрешений и окон присмотра. Что самое крутое на этом этапе эпохи веб-разработки, так это то, что мы способны делать ...
Читать далее »
От автора: CSS Grid — это стабильная, гибкая и современная парадигма, которая пришла на смену другим системам верстки CSS. В то время, как эти характеристики способствуют принятию Grid, они также затрудняют ее изучение. Верстка Grid CSS требует практического освоения многих новых свойств, которые не только описывают один аспект внешнего вида или поведения, но и вводят совершенно новую систему макетов. Эта ...
Читать далее »
От автора: В этой статье объясняется разница между явными и неявными сетками в CSS Grid. CSS grid layout использует концепцию явной и неявной сетки. Построение сеток CSS без нее не обходится. Это ключевая концепция, которую вы должны знать, иначе вы можете получить кучу строк или столбцов, которых не ожидали! Явные и неявные сетки Явная сетка является сеткой, которую вы определяете ...
Читать далее »
От автора: сетка имеет некоторые функции «адаптивности», когда элементы сетки фиксированного размера будут смещаться в соответствии с размером области просмотра. Также адаптивная сетка CSS может быть объединена с медиа-запросами, чтобы представить другую сетку для небольших окон просмотра. Разметка сетки предоставляет ключевые слова auto-fill и auto-fit, которые позволяют создать сетку с таким количеством треков определенного размера, который будет соответствовать контейнеру. Таким ...
Читать далее »
От автора: Рассмотрим создание сетки CSS Grid 3х3 с небольшим зазором между треками сетки. Мы создадим базовую сетку, которая выглядит следующим образом: Базовая сетка 3х3 (3 ряда и 3 колонки). Вот код: <!doctype html> <title>Example</title> <style> #grid { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; grid-gap: 2vw; } #grid > div { font-size: 5vw; padding: .5em; background: ...
Читать далее »
От автора: CSS grid layout — это новая модель макета, оптимизированная для двумерных макетов. Она идеально подходит для веб-сайтов, форм, галерей изображений и всего, что требует точного и гибкого позиционирования. CSS включает в себя множество свойств, которые могут помочь с макетом сайта. Но до начала 2017 года в CSS не было механизма создания двухмерных макетов веб-сайтов. Но все изменилось с ...
Читать далее »
От автора: здесь мы используем синтаксис CSS grid layout «ASCII art» для создания макета сайта с тремя столбцами. Сетка включает в себя интуитивно понятный синтаксис «ASCII art», с помощью которого вы можете практически «увидеть» макет в коде. Даже серьезные изменения могут быть выполнены за несколько секунд. Этот интуитивно понятный синтаксис также помогает с адаптивным веб-дизайном. С помощью CSS Grid макет ...
Читать далее »
От автора: давайте вкратце рассмотрим эту тему и попытаемся ответить без длинных объяснений. Существует много общего между Flexbox и Grid CSS, начиная с того, что они используются для разметки и являются гораздо более мощными, чем любая техника разметки, которая была до них. Они могут растягиваться и сжиматься, они могут центрировать вещи, они могут переупорядочивать вещи, они могут выравнивать вещи… Существует ...
Читать далее »