Flexbox-ähnlich 'Just Put Elements in einer Reihe' mit CSS Grid

Manchmal verwenden wir Flexbox einfach, um Elemente in einer Reihe mit Abstand zu ordnen. Während Flexbox mit gap eine bequeme Lösung bleibt, lohnt es sich, sich daran zu erinnern, dass CSS -Gitter eine ähnliche Fähigkeit bietet.

Betrachten Sie dieses Beispiel:

 .Netz {
  Anzeige: Grid;
  Lücke: 1Rem;
  Grid-Auto-Flow: Säule;
}

Die Elemente erscheinen ohne Inhalt gleich breit, aber mit Inhalten werden sie sich anhand ihrer natürlichen Breite anpassen. Verwenden Sie für mehr Kontrolle width , min-width , max-width auf den Gitterelementen oder definieren Sie grid-template-columns mit repeat(auto-fit, minmax(min-content, 1fr)) damit die minimale Inhaltsbreite die Spaltenbreite bestimmen kann.

 .Netz {
  Anzeige: Grid;
  Lücke: 1Rem;
  Grid-Auto-Flow: Säule;
  Grid-Template-Säulen: Wiederholung (automatisch, minmax (min-content, 1fr));
}

Flexible Gitter sind unglaublich mächtig.

Wenn Sie das Netz benötigen, um nur die Breite seines Inhalts (weniger als 100%oder sogar auto ) aufzunehmen, denken Sie an diese display: inline-grid; ist eine Option.

Das obige ist der detaillierte Inhalt vonFlexbox-ähnlich 'Just Put Elements in einer Reihe' mit CSS Grid. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!