Wie erreicht man CSS-Grid-Wrapping ohne Medienabfragen mithilfe von Auto-Fill oder Auto-Fit?

Verwenden der automatischen Füllung oder Anpassung des CSS-Rasters zum Umbrechen ohne Medienabfragen

Im CSS-Raster ist ein automatischer Umbruch ohne Medienabfragen möglich durch Verwendung der Schlüsselwörter „Auto-Fill“ oder „Auto-Fit“ in der Notation „repeat()“ innerhalb von Grid-Template-Columns oder Grid-Template-Rows.

Automatisch ausfüllen

Das Schlüsselwort „Auto-Fill“ definiert die Anzahl der Rasterzellen, um den verfügbaren Platz des Containers zu füllen. Die Anzahl der Spalten wird automatisch an die Containergröße angepasst, ohne dass es zu einem Überlauf kommt.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

In diesem Beispiel gibt die Eigenschaft „grid-template-columns“ an, dass das Raster seine Breite automatisch mit bis zu 186 Pixeln füllen soll Spalten wie möglich.

Automatisch anpassen

Das Schlüsselwort „Auto-Fit“ verhält sich ähnlich wie automatisch ausfüllen, aber es passt die Größe der Spalten an den verfügbaren Platz an und nicht an die Anzahl der Spalten.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, auto));
}

In diesem Beispiel gibt die Eigenschaft „grid-template-columns“ an, dass das Raster automatisch ausgefüllt werden soll Passen Sie so viele Spalten wie möglich in den verfügbaren Platz ein, wobei jede Spalte eine Mindestbreite von 186 Pixel und eine automatische Maximalbreite hat.

Mit diesen Techniken können Sie ein CSS-Raster erstellen, das sie umschließt Inhalte, ohne dass Medienabfragen erforderlich sind, und passen sich dynamisch an den verfügbaren Platz an.

Das obige ist der detaillierte Inhalt vonWie erreicht man CSS-Grid-Wrapping ohne Medienabfragen mithilfe von Auto-Fill oder Auto-Fit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!