Вопросы React Frontend Developer

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

CSS Grid позволяет создавать гибкие макеты с помощью свойств, таких как grid-template-columns, grid-template-rows и grid-template-areas. Эти свойства помогают управлять размещением элементов и адаптировать макет для разных экранов с использованием медиазапросов.

• Двумерные макеты: Сетки с строками и столбцами.

• Точное размещение: Элементы можно размещать в любых ячейках.

• Контроль пробелов: Управление промежутками (gap) между строками/столбцами.

fr — это единица измерения в CSS Grid, которая обозначает долю свободного пространства. Браузер сначала учитывает фиксированные размеры и auto, а оставшееся место делит между колонками с fr. Значения fr работают как пропорции: 1fr 2fr означает деление в соотношении 1 к 2. Это удобный способ делать резиновые layout’ы.

Чтобы отцентрировать элемент поверх нескольких колонок Grid, обычно используют grid-column для растягивания элемента и place-self: center или flex внутри него. Альтернатива — абсолютное позиционирование относительно grid-контейнера. Grid-способ предпочтительнее, потому что он остаётся декларативным и адаптивным. Абсолютное позиционирование используют, если элемент не должен влиять на сетку