Сетка из адаптивных (responsive) квадратов

Вы можете создать адаптивную сетку квадратов с вертикально и горизонтально центрированным контентом только с помощью CSS.

Я объясню в пошаговом процессе, как это сделать, но сначала посмотрите здесь две демоверсии того, как вы сможете это реализовать:

• Grid of square images
• Grid of squares with content

Теперь давайте посмотрим, как сделать эти причудливые responsive квадраты!

1. Создание адаптивных квадратов:

Трюк для сохранения пропорций 1:1 - square (или любого другого соотношения сторон) заключается в использовании процента padding-bottom.

Примечание: вы можете использовать top padding или top/bottom margin, но фон элемента не будет отображаться.

Поскольку top padding рассчитывается в соответствии с шириной родительского элемента (см. MDN для справки), высота элемента будет изменяться в соответствии с его шириной.

Теперь вы можете сохранять пропорции в соответствии с шириной.

На этом этапе вы можете применить код:

HTML:

 <div></div>      

CSS:

div {
    width: 30%;
    padding-bottom: 30%; /* = width for a square aspect ratio */
}      

Вот простой пример раскладки квадратов 3 * 3 с использованием кода выше

С помощью этой методики, вы можете сделать любое другое соотношение сторон, здесь приведена таблица, в которой заданы значения bottom padding в соответствии с соотношением сторон и шириной 30%.

 Aspect ratio  |  padding-bottom  |  for 30% width
------------------------------------------------
    1:1        |  = width         |    30%
    1:2        |  width x 2       |    60%
    2:1        |  width x 0.5     |    15%
    4:3        |  width x 0.75    |    22.5%
    16:9       |  width x 0.5625  |    16.875%

2. Добавление содержимого внутри квадратов

Поскольку вы не можете добавлять содержимое непосредственно внутри квадратов (это увеличит их высоту, а квадраты не будут квадратами больше), вам нужно создать дочерние элементы (для этого примера я - использую divs) внутри них с position:abolute;
И размещаю контент в дочерних элементах.
Это выведет контент из потока и сохранит размер квадрата.

Не забудьте добавить position:relative; на родительских divs, так как absolute children размещаются / оцениваются относительно своего родителя.

Давайте добавим некоторый контент в нашу сетку 3x3 квадратов:

HTML:

<div class="square">
    <div class="content">
        .. CONTENT HERE ..
    </div>
</div>
... and so on 9 times for 9 squares ...        

CSS:

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom: 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}
.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
} 

RESULT <-- с некоторым форматированием, чтобы сделать его симпатичным!

3.Центрирование контента

Горизонтально:

Это довольно просто, вам просто нужно добавить text-align: center в `.content.

RESULT

Вертикальное выравнивание:

Это становится серьезным! Весь фокус в том, чтобы использовать

display:table;
/* and */
display:table-cell;
vertical-align:middle;    

Но мы не можем использовать display: table; На .square или .content divs, потому что это противоречит position:absolute; Поэтому нам нужно создать два дочерних элемента внутри .content divs. Наш код будет обновлен следующим образом:

HTML:

<div class="square">
    <div class="content">
        <div class="table">
            <div class="table-cell">
                ... CONTENT HERE ...
            </div>
        </div>
    </div>
</div>
... and so on 9 times for 9 squares ...        

CSS:

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 30%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
}
.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;
}    

Мы закончили, и мы можем посмотреть на результат здесь:

LIVE FULLSCREEN RESULT

editable fiddle here

Перевод ответа: Grid of responsive squares @web-tiki