it-swarm.com.de

Raster aus reagierenden Quadraten

Ich frage mich, wie ich ein Layout mit responsive squares erstellen würde. Jedes Quadrat hätte vertikal und horizontal ausgerichtet Inhalt. Das spezifische Beispiel wird unten angezeigt ...

responsive squares with content

157
garethdn

Sie können ein ansprechendes Gitter aus Quadraten nur mit vertikalem und horizontalem zentriertem Inhalt erstellen mit [~ # ~] css [~ # ~]. Ich werde erklären, wie in einem schrittweisen Prozess, aber zuerst sind hier 2 Demos von dem, was Sie erreichen können:

Responsive 3x3 square gridResponsive square images in a 3x3 grid

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



1. Erstellen Sie die entsprechenden Quadrate:

Der Trick, um Elemente quadratisch zu halten (oder was auch immer das andere Seitenverhältnis sein mag), ist die Verwendung von Prozent padding-bottom.
Randnotiz: Sie können auch den oberen Rand oder den oberen/unteren Rand verwenden, der Hintergrund des Elements wird jedoch nicht angezeigt.

Da das Auffüllen von oben anhand der Breite des übergeordneten Elements berechnet wird ( Referenz siehe MDN ), entspricht die Höhe des Elements ändert sich 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 Layout-Beispiel aus 3 * 3-Quadraten mit dem obigen Code.

Mit dieser Technik können Sie ein beliebiges anderes Seitenverhältnis erstellen. In der folgenden Tabelle sind die Werte der unteren Polsterung in Abhängigkeit vom 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 keine Inhalte direkt in die Quadrate einfügen können (dies würde deren Höhe vergrößern und Quadrate würden keine Quadrate mehr sein), müssen Sie in ihnen untergeordnete Elemente erstellen (in diesem Beispiel verwende ich divs) mit position: absolute; und legen Sie den Inhalt in sie. Dadurch wird der Inhalt aus dem Fluss entfernt und die Größe des Quadrats beibehalten.

Vergessen Sie nicht , den übergeordneten Divs position:relative; Hinzuzufügen, damit die absoluten Kinder relativ zu ihren übergeordneten Divs positioniert werden.

Fügen wir unserem 3x3-Quadrat-Raster etwas Inhalt 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%;
}

RESULT <- mit einigen Formatierungen, um es hübsch zu machen!



3.Inhalt zentrieren

Horizontal:

Dies ist ziemlich einfach, Sie müssen nur text-align:center Zu .content Hinzufügen.
ERGEBNIS

Vertikale Ausrichtung

Das wird ernst! Der Trick ist zu verwenden

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

, aber wir können display:table; nicht für .square oder .content Divs verwenden, da es einen Konflikt mit position:absolute;, Also müssen wir zwei Kinder in divs .content 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 RESULT

editierbare Geige hier


392
web-tiki

Sie könnten vw-Einheiten (Ansichtsbreite) verwenden, wodurch die Quadrate entsprechend der Breite des Bildschirms reagieren.

Ein kurzes Modell hierfür 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>
13
jbutler483

Die akzeptierte Antwort ist großartig, dies kann jedoch mit flexbox erfolgen.

Hier ist ein mit BEM-Syntax geschriebenes Rastersystem, 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 das justify-content Eigenschaft unter dem .square-grid Klasse.

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

Dies ist in FF und Chrome getestet.

8

Ich habe eine Bibliothek geschrieben, die simpleGrid heißt und genau das tut, und das Coole daran ist, dass es das ist Es kann eine beliebige Anzahl von Elementen ohne Leistungsprobleme verarbeiten. Die Anzahl der Elemente pro Zeile wird automatisch angepasst.

Wenn Sie möchten, dass jedes Objekt ein bestimmtes Seitenverhältnis hat, müssen Sie dafür einen Trick verwenden, was hübsch ist einfach.

1
vsync

Ich benutze diese Lösung für reaktionsschnelle Boxen verschiedener 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

0
mitjajez