Сітка чуйних квадратів

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

Ви можете створити чуйну сітку квадратів з вмістом, орієнтованим по вертикалі та горизонталі, лише за допомогою CSS . Я поясню як покроковий процес, але спочатку наведено два демонстрації того, чого ви можете досягти:

• Сітка квадратних зображень
• Сітка квадратів зі змістом

Тепер давайте подивимося, як зробити ці вигадливі чуйні квадрати!

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. Додавання вмісту всередині квадратів

Оскільки ви не можете додавати вміст безпосередньо у квадрати (це збільшить їх висоту, а квадрати більше не будуть квадрати), вам потрібно створити дочірні елементи (для цього прикладу я використовую діви) всередині них position: absolute;і помістити вміст всередину них . Це виведе вміст із потоку та збереже розмір квадрата.

Не забудьте додати position:relative;до батьківських дівок, щоб абсолютні діти розміщувались / розмірами відносно своїх батьків.

Додамо трохи вмісту до нашої 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%;
}

РЕЗУЛЬТАТ <- з деяким форматуванням, щоб зробити його гарним!

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

Зараз ми закінчили, і ми можемо подивитися на результат тут:

ЖИВИЙ ПОВНИЙ РЕЗУЛЬТАТ

тут можна редагувати загадку

Ви можете використовувати 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>

Прийнята відповідь чудова, проте це можна зробити flexbox.

Ось система сітки, написана з синтаксисом BEM, яка дозволяє відображати по 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%;
}

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

<div class='square-grid'>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
  <div class='square-grid__cell square-grid__cell--7'>
    <div class='square-grid__content'>
      Some content
    </div>
  </div>
</div>

Fiddle: https://jsfiddle.net/patrickberkeley/noLm1r45/3/

Це перевірено в FF та Chrome.

Я використовую це рішення для чуйних коробок різного раціону:

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