Raster von ansprechenden Quadraten

Ich frage mich, wie ich ein Layout mit ansprechenden Quadraten erstellen soll . Jedes Quadrat hätte vertikal und horizontal ausgerichteten Inhalt. Das spezifische Beispiel wird unten angezeigt ...

Sie können nur mit CSS ein ansprechendes Quadratraster mit vertikal und horizontal zentriertem Inhalt erstellen . Ich werde erklären, wie in einem schrittweisen Prozess, aber zuerst hier sind 2 Demos von dem, was Sie erreichen können:

• Raster aus quadratischen Bildern
• Raster von Quadraten mit Inhalt

Nun wollen wir sehen, wie man diese ausgefallenen reaktionsschnellen Quadrate macht!

1. Erstellen der Antwortquadrate:

Der Trick, um Elemente quadratisch zu halten (oder ein anderes Seitenverhältnis), besteht darin, Prozent zu verwenden padding-bottom.
Randnotiz: Sie können auch die obere Polsterung oder den oberen / unteren Rand verwenden, aber der Hintergrund des Elements wird nicht angezeigt.

Da die obere Polsterung gemäß der Breite des übergeordneten Elements berechnet wird ( siehe MDN als Referenz ), ändert sich die Höhe des Elements entsprechend seiner Breite. Sie können jetzt das Seitenverhältnis entsprechend der Breite beibehalten.
An dieser Stelle können Sie Folgendes codieren:

HTML :

 <div></div>

CSS

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

Hier ist ein einfaches Layoutbeispiel für ein 3 * 3-Quadrat-Raster unter Verwendung des obigen Codes.

Mit dieser Technik können Sie jedes andere Seitenverhältnis erstellen. In der folgenden Tabelle sind die Werte der Bodenpolsterung entsprechend dem Seitenverhältnis und einer Breite von 30% angegeben.

 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. Hinzufügen von Inhalten innerhalb der Quadrate

Da Sie Inhalte nicht direkt in die Quadrate einfügen können (dies würde ihre Höhe erweitern und Quadrate wären keine Quadrate mehr), müssen Sie untergeordnete Elemente (in diesem Beispiel verwende ich divs) in ihnen erstellen position: absolute;und den Inhalt in sie einfügen . Dadurch wird der Inhalt aus dem Fluss entfernt und die Größe des Quadrats beibehalten.

Vergessen Sie nicht,position:relative; die übergeordneten Divs hinzuzufügen, damit die absoluten Kinder relativ zu ihren Eltern positioniert sind.

Fügen wir unserem 3x3-Quadratgitter einige Inhalte hinzu:

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

ERGEBNIS <- mit etwas Formatierung, um es hübsch zu machen!

3.Zentrieren des Inhalts

Horizontal:

Dies ist sehr einfach, man muss nur hinzufügen text-align:centerzu .content.
ERGEBNIS

Vertikale Ausrichtung

Das wird ernst! Der Trick ist zu verwenden

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

Wir können display:table;on .squareoder .contentdivs jedoch nicht verwenden, da dies in Konflikt steht. Daher position:absolute;müssen wir zwei Kinder in .contentdivs erstellen . Unser Code wird wie folgt aktualisiert:

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

Wir sind jetzt fertig und können uns das Ergebnis hier ansehen:

LIVE FULLSCREEN ERGEBNIS

bearbeitbare Geige hier

Sie können vw-Einheiten (Ansichtsbreite) verwenden, wodurch die Quadrate entsprechend der Bildschirmbreite reagieren.

Ein kurzes Modell davon wäre:

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>

Die akzeptierte Antwort ist großartig, aber dies kann mit getan werden flexbox.

Hier ist ein Rastersystem mit BEM-Syntax , mit dem 1-10 Spalten pro Zeile angezeigt werden können.

Wenn dort die letzte Zeile unvollständig ist (Sie möchten beispielsweise 5 Zellen pro Zeile anzeigen und es gibt 7 Elemente), werden die nachfolgenden Elemente horizontal zentriert. Um die horizontale Ausrichtung der nachfolgenden Elemente zu steuern, ändern Sie einfach die justify-contentEigenschaft unter der .square-gridKlasse.

.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>

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

Dies wird in FF und Chrome getestet.

Ich benutze diese Lösung für reaktionsschnelle Boxen mit verschiedenen Rationen:

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

Siehe Demo auf JSfiddle.net