Как div сделать квадратом (CSS)

Мы регулярно выпускаем такие полезные статьи. Подпишитесь на наш Телеграм-канал, чтобы получать оповещения о новых публикациях.

Задача

Резиновые div делать квадратными (ширина равна высоте).

В квадраты помещать контент.

<div id="parent">
    <div class="item">
        <div class="item-ins">
        </div>
    </div>
    <div class="item">
        <div class="item-ins">
        </div>
    </div>
    <div class="item">
        <div class="item-ins">
        </div>
    </div>
</div>

Решение

Ширина родительского div меняется от разрешения к разрешению, значит зададим внутренним блокам ширину:

.item {
    position: relative;
    width: calc(100%/3);
}

Хороший хостинг для сайта

Для квадратной формы применим вот такую конструкцию:

.item {
    height: 0;
    padding-bottom: calc(100%/3};
}

Для внутреннего блока, в котором будет контент и который должен использовать всю площадь родителя:

.item-ins {
    position: absolute;
    width: 100%;
    height: 100%;
}