Gewusst wie: Responsive Image Grid
Erfahren Sie, wie Sie ein responsives Bildraster erstellen.
Responsives Bildraster
Erfahren Sie, wie Sie eine Bildergalerie erstellen, die je nach Bildschirmgröße zwischen vier, zwei oder Bildern in voller Breite variiert:
Erstellen eines Bildrasters
Schritt 1) HTML hinzufügen:
Beispiel
<div class="row">
<div class="column">
<img
src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div
class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
<div
class="column">
<img src="wedding.jpg">
<img src="rocks.jpg">
<img src="falls2.jpg">
<img src="paris.jpg">
<img src="nature.jpg">
<img src="mist.jpg">
<img src="paris.jpg">
</div>
<div class="column">
<img src="underwater.jpg">
<img src="ocean.jpg">
<img src="wedding.jpg">
<img src="mountainskies.jpg">
<img src="rocks.jpg">
<img src="underwater.jpg">
</div>
</div>
Schritt 2) CSS hinzufügen:
Verwenden Sie CSS Flexbox, um ein ansprechendes Layout zu erstellen:
Beispiel
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/*
Create four equal columns that sits next to each other */
.column {
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two
column-layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
flex:
50%;
max-width: 50%;
}
}
/*
Responsive layout - makes the two columns stack on top of each other instead
of next to each other */
@media screen and (max-width: 600px) {
.column {
flex: 100%;
max-width: 100%;
}
}
Tipp: Gehen Sie zu unserem Bildraster-Tutorial , um zu erfahren, wie Sie ein anklickbares Raster erstellen, das zwischen den Spalten variiert.
Tipp: Besuchen Sie unser CSS-Flexbox-Tutorial , um mehr über das flexible Box-Layout-Modul zu erfahren.