Raster von ansprechenden Quadraten

170

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

reaktionsschnelle Quadrate mit Inhalt

garethdn
quelle
Ich hasse es, wenn Fragen mit großartigen Antworten von Leuten mit einer wirklich pedantischen Einstellung, wie Stackoverflow aussehen sollte, zufällig geschlossen werden. Wenn sie gute, akzeptierte, positiv bewertete Antworten haben ... warum schließen? Wo ist die Verwirrung zu haben? Sicher, auf seinem eigenen "Raster von reaktionsfähigen Quadraten" muss möglicherweise ein wenig oder viel erklärt werden, aber dies ist eine 7 Jahre alte Frage mit 160+ und einer Antwort von 400+. Ich stimme wieder zu öffnen.
leinaD_natipaC

Antworten:

416

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:

Reaktionsschnelles 3x3-Quadratraster Reaktionsschnelle quadratische Bilder in einem 3x3-Raster

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


Web-Tiki
quelle
2
@ d.raev ja. Prozentuale Auffüllungen und Ränder werden entsprechend der Breite des übergeordneten Elements berechnet. Überprüfen Sie hier für padding developer.mozilla.org/en-US/docs/Web/CSS/padding
web-tiki
4
Das ist toll. Nur ein Heads-up für andere: Wenn Sie verwenden, müssen * { box-sizing: border-box; }Sie die Höhe und Breite im .content div auf 100% einstellen. :)
Rob Flaherty
2
Was ist der Kalkül hinter dem Randwert? Was ist, wenn ich ein Raster 5x5 einstellen möchte?
Kiwi1342
2
@ kiwi1342 Die Summe aller Ränder + aller Breiten in einer Zeile muss 100% betragen . Für ein 5x5-Raster können Sie also 18% Breite mit 1% Rand auf jeder Seite der Elemente verwenden.
Web-Tiki
1
Fantastisch. Nur ein Kopf hoch: Um horizontal und vertikal zu zentrieren, machen Sie den .content einfach zu einer Flexbox mitjustify-content: center; align-items: center; flex-flow: column nowrap;
NonameSL
14

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>

jbutler483
quelle
4
Verwenden Sie nicht margin-left: -4px;verwenden margin-right:-4px. Verwirren Sie sich lieber nicht mit Inkonsistenzen im Mincharspace, sondern setzen Sie die übergeordnete Wrapper-Schriftgröße auf 0 und dann auf die untergeordneten Elemente, die auf 1rem(relative-em) zurückgesetzt wurden
Roko C. Buljan,
9

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

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

Dies wird in FF und Chrome getestet.

Patrick Berkeley
quelle
3
Trotzdem verwenden Sie Padding-Bottom, um die Höhe zu fixieren. Es handelt sich also tatsächlich um dieselbe Antwort wie akzeptiert. Der einzige Unterschied besteht darin, wie das Gitter erstellt wurde, nicht das quadratische Gitter.
Extempl
0

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

Mitjajez
quelle
2
Es wäre von Vorteil, wenn Sie mehr über Ihre Antwort erklären würden ... oder sogar eine JSFiddle
Wavesailor