Архив меток: CSS Grid

Отладка CSS Grid как профи

От автора: теперь вы можете использовать Chrome DevTools для визуальной проверки CSS-сеток и их отладки. CSS Grid — это модуль, который позволяет более эффективно разрабатывать сложные адаптивные веб-дизайны, сохраняя при этом согласованность между браузерами. Для разработчика CSS Grid — это инструмент, который помогает справляться с такими вещами, как повторное использование кода, бесконечные размеры экрана, скорость загрузки страницы и т. д. ...

Читать далее »

Прикрепленные элементы сетки в CSS

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

Читать далее »

Подробное рассмотрение CSS Grid minmax()

От автора: существует множество учебных пособий и руководств, которые обучают CSS-grid в целом, и я писал об этом несколько раз. Однако я заметил, что существует неправильное понимание функции minmax(), поскольку большинство статей являются общими или не содержат достаточного объяснения и реальных примеров использования. minmax() очень мощный и полезный инструмент. По этой конкретной причине я подумал, что написание полного руководства minmax() ...

Читать далее »

Нестандартное мышление с CSS Grid

От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так? Некоторые примеры макетов из Grid by Example Рэйчел Эндрю с сайта Энди Барефут создаёт ...

Читать далее »