Коротко: квадрат в CSS делают тремя способами: задать равные width и height, использовать aspect-ratio: 1 / 1 (современный и адаптивный вариант) или «старый» приём с padding-top: 100%. Для адаптивной сетки квадратов лучше всего подходит aspect-ratio.
Способы
| Способ | Особенность |
|---|---|
width + height |
фиксированный размер |
aspect-ratio: 1 |
адаптивный, зависит от ширины |
padding-top: 100% |
старый трюк до aspect-ratio |
| grid с квадратными ячейками | для сетки плиток |
Вкладки: примеры
.square {
width: 120px;
height: 120px;
}Просто и предсказуемо. Минус — на разных экранах размер не меняется, поэтому для адаптивных плиток подходит хуже.
.square {
width: 100%;
aspect-ratio: 1 / 1;
background: #f3f3f3;
border-radius: 12px;
}Современный способ: высота вычисляется из ширины автоматически. Работает во всех актуальных браузерах и не требует хаков.
.square {
position: relative;
width: 100%;
padding-top: 100%; /* высота = ширине */
background: #f3f3f3;
}
.square > * {
position: absolute;
inset: 0;
}Раньше это был единственный способ сделать адаптивный квадрат. Содержимое приходилось позиционировать абсолютно. Сейчас нужен только для поддержки древних браузеров.
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 16px;
}
.tile {
aspect-ratio: 1;
overflow: hidden;
border-radius: 12px;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }Сетка ровных квадратов, которая сама переносит плитки. object-fit: cover не даёт изображению искажаться.
display: grid; place-items: center;. А если это картинка — object-fit: cover, чтобы она заполнила квадрат без искажений.Практика: галерея квадратов
- Сетка с
auto-fillиminmax. - Плиткам —
aspect-ratio: 1. - Обрезка содержимого:
overflow: hidden. - Картинкам —
object-fit: cover. - Радиусы и тени — как в дизайн-системе.
- Проверьте: при изменении окна плитки остаются квадратными.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Квадрат «вытянулся» | участвует padding/бордер | box-sizing: border-box |
| Картинка искажена | нет object-fit |
object-fit: cover |
| aspect-ratio не работает | старый браузер | фолбэк через padding-top |
| Содержимое обрезается | мало места | центрировать и уменьшить отступы |
Проверьте себя
Вопросы и ответы
Добавьте border-radius: 50%. Форма останется «квадратной» в раскладке, но визуально станет кругом.
aspect-ratio: 16 / 9; — пропорции задаются так же просто, как и квадрат.
Скорее всего внутри есть padding или рамка, а box-sizing не задан. Включите border-box или перенесите отступы внутрь.
Практически нет: aspect-ratio поддерживается во всех актуальных браузерах. Трюк оставьте для очень старых проектов.
Итоги
- Фиксированный квадрат — равные
widthиheight. - Адаптивный —
aspect-ratio: 1 / 1. - Картинке —
object-fit: coverиoverflow: hidden. - Старый padding-трюк нужен только для поддержки древних браузеров.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.