Сетка отзывчивых квадратов

170

Мне интересно, как бы я мог создать макет с адаптивными квадратами . Каждый квадрат будет иметь вертикально и горизонтально выровненный контент. Конкретный пример показан ниже ...

отзывчивые квадраты с содержанием

html css responsive-design grid-layout aspect-ratio garethdn
источник
Я ненавижу, как вопросы с отличными ответами случайно закрываются людьми с действительно педантичным взглядом на то, каким должен быть стекопоток. Если у них есть хорошие, принятые, проголосовавшие ответы ... зачем закрывать ??? Где путаница, которая будет иметься? Конечно, для своей «сетки адаптивных квадратов», возможно, понадобится немного или много объяснений, но это 7-летний, 160+ вопрос с 400+ ответом. Я голосую заново.
leinaD_natipaC

Ответы:

416

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

Отзывчивая 3х3 квадратная сетка Адаптивные квадратные изображения в сетке 3х3

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


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

Хитрость в том, что элементы должны быть квадратными (или с любым другим соотношением сторон) - использовать процент padding-bottom.
Примечание: вы можете использовать верхнее заполнение или верхнее / нижнее поле, но фон элемента не будет отображаться.

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

HTML :

 <div></div>

CSS

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

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

С помощью этой техники вы можете сделать любое другое соотношение сторон, вот таблица, в которой приведены значения нижнего отступа в соответствии с соотношением сторон и шириной 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. Добавление контента внутри квадратов

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

Не забудьте добавить position:relative;родительские элементы div, чтобы абсолютные дочерние элементы располагались / измерялись относительно своих родителей.

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

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%;
}

РЕЗУЛЬТАТ <- с некоторым форматированием, чтобы сделать его красивым!


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

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

Это довольно просто, вам просто нужно добавить text-align:centerв .content.
РЕЗУЛЬТАТ

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

Это становится серьезным! Хитрость заключается в использовании

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

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

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

редактируемая скрипка здесь

веб-Тики
источник
2
@ d.raev да. Процентные отступы и поля рассчитываются в зависимости от ширины родительского элемента. Проверьте здесь для заполнения pad developer.mozilla.org/en-US/docs/Web/CSS/padding
web-tiki
4
Это круто. Просто * { box-sizing: border-box; }наперед для других: если вы используете, вам нужно отрегулировать высоту и ширину в .content div до 100%. :)
Роб Флаэрти,
2
Что такое исчисление за маржинальным значением? Что делать, если я хочу установить сетку 5х5?
kiwi1342
2
@ kiwi1342 сумма всех полей + вся ширина в строке должна быть равна 100%. Таким образом, для сетки 5x5 вы можете использовать ширину 18% с полями 1% с каждой стороны элементов.
web-tiki
1
Фантастика. Просто на голову: для центрирования по горизонтали и вертикали просто сделайте .content гибкой коробкой сjustify-content: center; align-items: center; flex-flow: column nowrap;
NonameSL
15

Вы можете использовать единицы измерения vw (view-width), которые сделают квадраты отзывчивыми в соответствии с шириной экрана.

Быстрый макет этого будет:

html,
body {
  margin: 0;
  padding: 0;
}
div {
  height: 25vw;
  width: 25vw;
  background: tomato;
  display: inline-block;
  text-align: center;
  line-height: 25vw;
  font-size: 20vw;
  margin-right: -4px;
  position: relative;
}
/*demo only*/

div:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: inherit;
  width: inherit;
  background: rgba(200, 200, 200, 0.6);
  transition: all 0.4s;
}
div:hover:before {
  background: rgba(200, 200, 200, 0);
}
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
Развернуть фрагмент

jbutler483
источник
4
Не используйте margin-left: -4px;использование margin-right:-4px. Скорее, не связывайтесь с несогласованностью в mincharspace, но установите для родительского элемента размера шрифта обертку значение 0, а не для дочерних элементов, сбрасываемых в 1rem(относительный-em)
Roko C. Buljan
9

Принятый ответ великолепен, однако это можно сделать с помощью flexbox.

Вот сеточная система, написанная с синтаксисом БЭМ, который позволяет отображать 1-10 столбцов на строку.

Если последняя строка является неполной (например, вы хотите отобразить 5 ячеек в строке и 7 элементов), конечные элементы будут центрированы по горизонтали. Чтобы управлять горизонтальным выравниванием конечных элементов, просто измените justify-contentсвойство в .square-gridклассе.

.square-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.square-grid__cell {
  background-color: rgba(0, 0, 0, 0.03);
  box-shadow: 0 0 0 1px black;
  overflow: hidden;
  position: relative;
}

.square-grid__content {
  left: 0;
  position: absolute;
  top: 0;
}

.square-grid__cell:after {
  content: '';
  display: block;
  padding-bottom: 100%;
}

// Sizes – Number of cells per row

.square-grid__cell--10 {
  flex-basis: 10%;
}

.square-grid__cell--9 {
  flex-basis: 11.1111111%;
}

.square-grid__cell--8 {
  flex-basis: 12.5%;
}

.square-grid__cell--7 {
  flex-basis: 14.2857143%;
}

.square-grid__cell--6 {
  flex-basis: 16.6666667%;
}

.square-grid__cell--5 {
  flex-basis: 20%;
}

.square-grid__cell--4 {
  flex-basis: 25%;
}

.square-grid__cell--3 {
  flex-basis: 33.333%;
}

.square-grid__cell--2 {
  flex-basis: 50%;
}

.square-grid__cell--1 {
  flex-basis: 100%;
}

Показать фрагмент кода

Скрипка: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

Это проверено в FF и Chrome.

Патрик Беркли
источник
3
Тем не менее, вы используете padding-bottom, чтобы зафиксировать высоту, так что это на самом деле тот же ответ, что и принятый. Разница лишь в том, как устроена сетка, а не квадратная сетка.
расширенный
0

Я использую это решение для адаптивных коробок разных рационов:

HTML:

<div class="box ratio1_1">
  <div class="box-content">
            ... CONTENT HERE ...
  </div>
</div>

CSS:

.box-content {
  width: 100%; height: 100%;
  top: 0;right: 0;bottom: 0;left: 0;
  position: absolute;
}
.box {
  position: relative;
  width: 100%;
}
.box::before {
    content: "";
    display: block;
    padding-top: 100%; /*square for no ratio*/
}
.ratio1_1::before { padding-top: 100%; }
.ratio1_2::before { padding-top: 200%; }
.ratio2_1::before { padding-top: 50%; }
.ratio4_3::before { padding-top: 75%; }
.ratio16_9::before { padding-top: 56.25%; }

Посмотреть демо на JSfiddle.net

mitjajez
источник
2
было бы полезно, если бы вы объяснили больше о своем ответе ... или даже включили JSFiddle
Wavesailor