Hoe OM - Responsiewe beeldrooster
Leer hoe om 'n responsiewe beeldrooster te skep.
Responsiewe beeldrooster
Leer hoe om 'n prentgalery te skep wat wissel tussen vier, twee of volle wydte prente, afhangende van die skermgrootte:
Skep 'n beeldrooster
Stap 1) Voeg HTML by:
Voorbeeld
<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>
Stap 2) Voeg CSS by:
Gebruik CSS Flexbox om 'n responsiewe uitleg te skep:
Voorbeeld
.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%;
}
}
Wenk: Gaan na ons Beeldrooster-tutoriaal om te leer hoe om 'n klikbare rooster te skep wat tussen kolomme verskil.
Wenk: Gaan na ons CSS Flexbox-tutoriaal om meer te wete te kom oor die buigsame boks-uitlegmodule.