От автора: мы реализовали новую классную технику автозаполнения в CSS Grid в ядре Drupal 10. Думаю, ей можно поделиться с миром. Требования: Пользователь определяет максимальное число колонок. Это будет «естественное» состояние нашей автозаполняемой сетки Если ячейка сетки становится уже заданной пользователем ширины, сетка перестраивается и уменьшает количество колонок Ячейки сетки всегда должны растягиваться на всю ширину grid-контейнера независимо от количества ...

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

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

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

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

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

От автора: когда-то существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было трудно сделать правильно: Макет Святого Грааля. Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и float, и ни один из них не подходил для этой задачи. Технически это было возможно, но требовались ...

От автора: инструменты для вертикального выравнивания в последнее время стали намного лучше. В первые годы работы в качестве дизайнера веб-сайтов я разрабатывал дизайн домашней страницы шириной 960 пикселей и выравнивал элементы по горизонтали на странице с помощью сетки из 12 столбцов. Появились медиа-запросы, которые потребовали серьезного психологического сдвига. Конечно, они решили некоторые значительные проблемы, но представили новые, например, работу с ...

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

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