Raster mit Auto-fit (Grid Tile Layouts)

Zwei verschiedene Breiten

Wir erstellen eine Galerie mit Bildern aus verschiedenen Breiten.

CSS Grid-Parent

.app{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 300px;
grid-auto-flow: dense;
grid-gap: 1rem;
border: 3px solid #eeeeee;
}

CSS Grid-items

.breit {
grid-column: span 2;
text-align: center;
background: #e6e6e6;
}

.hoch{
grid-row: span 1;
text-align: center;
background: #f6f6f6; br }