Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich mit CSS Grid oder Flexbox ein responsives Rasterlayout aus gleich großen Quadraten?

Wie erstelle ich mit CSS Grid oder Flexbox ein responsives Rasterlayout aus gleich großen Quadraten?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-11-21 15:04:09543Durchsuche

How to Create a Responsive Grid Layout of Equal-Sized Squares Using CSS Grid or Flexbox?

Responsives Rasterlayout mit gleich großen Quadraten

Problem:

Entwerfen Sie ein responsives Rasterlayout, das aus gleich großen Quadraten besteht , mit anpassbarem Dachrinnenabstand. Berücksichtigen Sie sowohl den CSS-Grid- als auch den Flexbox-Ansatz.

Lösung:

CSS-Grid mit Padding-Trick:

Verwenden Sie das „Padding“. -bottom"-Trick, um quadratische Proportionen zu erzwingen. Fügen Sie ein Pseudoelement mit einem prozentualen Abstand unten hinzu, der dem gewünschten quadratischen Seitenverhältnis entspricht (z. B. 100 %). Dies simuliert eine feste Höhe für den quadratischen Behälter.

.square {
  position: relative;
  ...
  padding-bottom: 100%;
}

.square::before {
  content: '';
  display: block;
  padding-top: 100%;
}

Flexbox mit absoluter Positionierung:

Verwenden Sie ein Flexbox-Layout mit einem Pseudoelement. Stellen Sie die Höhe des Pseudoelements auf das quadratische Seitenverhältnis (z. B. 100 %) ein und positionieren Sie den Inhalt absolut innerhalb des quadratischen Containers.

.square {
  position: relative;
  ...
  flex-grow: 0;
}

.square::before {
  content: '';
  display: block;
  height: 100%;
}

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

Rinnenabstand:

Bei beiden Ansätzen wenden Sie einen Rand oder eine Polsterung auf die zu erstellenden quadratischen Elemente an Dachrinnen.

Hinweis: Stellen Sie sicher, dass der Inhalt absolut innerhalb der Quadrate positioniert ist, um das Seitenverhältnis beizubehalten.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS Grid oder Flexbox ein responsives Rasterlayout aus gleich großen Quadraten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn