Bar Chart: Responsive med writing-mode
Forrige øvelse
Næste øvelse
Opgavebeskrivelse
Gør bar chartet responsivt, så søjlerne skifter til at stå på højkant, når containerens bredde er mindre end 400px. Brug writing-mode og @container.
Nulstil øvelsen
<div class="bars-container">
<article class="bars">
<div class="bar" data-percent="100"></div>
<div class="bar" data-percent="70"></div>
<div class="bar" data-percent="60"></div>
<div class="bar" data-percent="50"></div>
<div class="bar" data-percent="40"></div>
<div class="bar" data-percent="30"></div>
<div class="bar" data-percent="20"></div>
<div class="bar" data-percent="10"></div>
</article>
</div>
Vis writing-mode
writing-mode
.bars-container {
container: bar-chart / inline-size;
}
.bars {
@container (width < 400px) {
writing-mode: sideways-rl;
height: 100%;
}
}
.bar {
min-width: 40px;
}