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

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!