Как применить стиль display: grid только в браузерах, которые поддерживают CSS Grid?
Используйте feature query @supports (display: grid), а базовую раскладку задайте снаружи как fallback.
Читать ответПодготовка к интервью
11 вопросов по CSS Grid с технических собеседований
Что проверяют на интервью
На странице собраны вопросы по CSS Grid — от проверки базовых принципов до практического применения и архитектурных решений. В подборке чаще встречаются темы: css, frontend, css grid.
Каталог
Используйте feature query @supports (display: grid), а базовую раскладку задайте снаружи как fallback.
Читать ответУкажите третью колонку и третью строку через grid-column: 3 и grid-row: 3, а для самого угла ячейки добавьте justify-self и align-self: end.
Читать ответFlexbox подходит для выравнивания вдоль одной оси, Grid — для структуры с согласованными строками и колонками.
Читать ответFlexbox удобен для одномерного расположения, CSS Grid — для согласованной сетки строк и колонок.
Читать ответЗадайте две колонки grid-template-columns: repeat(2, minmax(0, 1fr)) — они разделят доступную ширину поровну.
Читать ответCSS Grid Layout (или просто CSS Grid) — это двумерная система раскладки в CSS.
Читать ответДа, можно и это распространенная практика.
Читать ответДа, grid system активно использую в работе для создания адаптивных и гибких макетов.
Читать ответЧтобы сделать количество колонок в CSS Grid динамическим при фиксированной ширине колонок, можно использовать функцию repeat с ключевым словом auto-fit или auto-fill и фиксированной шириной колонок через minmax.
Читать ответПреимущества CSS Grid и Flexbox CSS Grid — мощный двухмерный инструмент для построения интерфейсов Позволяет одновременно управлять строками и колонками Оптимален для сложных макетов с фиксированной или адаптивной сеткой
Читать ответGrid и Flexbox: задачи, для которых нужен Grid Двумерное позиционирование Grid одновременно размещает элементы по строкам и столбцам, тогда как Flexbox работает только в одном измерении — вдоль строки или столбца.
Читать ответ