Wie erstelle ich mit CSS Grid und Flexbox ein responsives Rasterlayout mit Quadraten gleicher Höhe?

Responsives Rasterlayout mit Quadraten gleicher Höhe

Einführung

Das Erstellen eines Rasterlayouts mit reaktionsfähigen Quadraten kann eine Herausforderung sein, insbesondere wenn man versucht, es beizubehalten gleiche Höhe und gleicher Abstand zwischen den Quadraten. Während sowohl CSS Grid als auch Flexbox für diesen Zweck verwendet werden können, wird in diesem Artikel untersucht, wie man dies mit CSS Grid und dem „Padding-Bottom“-Trick erreicht.

Höhe gleich Breite setzen

Verwenden von CSS Grid

Um die Höhe von Quadraten mithilfe von CSS Grid gleich ihrer Breite festzulegen, wenden Sie den Trick „padding-bottom“ an. Dadurch entsteht ein Pseudoelement, das das Seitenverhältnis des Quadrats beibehält. Die folgenden CSS-Regeln können angewendet werden:

.square-container {
  display: grid;
  grid-template-columns: 30% 30% 30%;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

Dadurch wird sichergestellt, dass die Quadrate Quadrate bleiben, unabhängig vom Inhalt.

Verwendung von Flexbox

Um den gleichen Effekt mit Flexbox zu erzielen, kann ein ähnlicher Ansatz verwendet werden:

.square-container {
  display: flex;
  flex-wrap: wrap;
}

.square {
  position: relative;
  flex-basis: calc(33.333% - 10px);  /* Subtract 10px for margin */
  margin: 5px;
  border: 1px solid;
  box-sizing: border-box;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;  /* Sets height equal to width */
}

.square .content {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
}

In Flexbox lautet die Inhaltseigenschaft Wird verwendet, um den Inhalt des Quadrats absolut innerhalb des Quadrats zu positionieren.

Steg zwischen Quadraten festlegen

Der Trick mit dem „Auffüllen des Bodens“ kann auch verwendet werden, um einen Steg zwischen Quadraten zu erstellen:

.square-container {
  gap: 10px;  /* Set the gap between squares */
}

Dadurch wird zwischen den einzelnen Quadraten ein Abstand von 10 Pixeln hinzugefügt.

Responsive Verhalten

Um das Layout responsive zu gestalten, kann eine Medienabfrage verwendet werden, um das Rasterlayout für kleinere Bildschirmgrößen in eine einzelne Spalte zu ändern:

@media (max-width: 600px) {
  .square-container {
    grid-template-columns: 100%;
  }
}

Dadurch wird sichergestellt, dass die Quadrate vertikal gestapelt werden schmale Bildschirme.

Fazit

Durch die Verwendung des „Padding-Bottom“-Tricks können sowohl CSS Grid als auch Flexbox verwendet werden Erstellen Sie ein ansprechendes Rasterlayout mit Quadraten gleicher Höhe und Zwischenrinnen. Diese Technik ist weit verbreitet und bietet eine zuverlässige Lösung für diese häufige Layoutanforderung.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS Grid und Flexbox ein responsives Rasterlayout mit Quadraten gleicher Höhe?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!