Dynamischer grid generiert aus breakpoints
CSSIch konnte MediaQueries dynamisch aus Zurb Foundations-Breakpoints für ein Raster mit folgendem Sass-Code generieren:
$i: 2;
@each $s,
$breakpoint in $breakpoints {
@media (min-width: $breakpoint) {
div.grid {
.element {
width: calc(100%/#{$i});
}
}
}
$i: $i+1;
}
In meinem Fall generiert es die Medienabfragen für alle Breakpoints, die für das Zurb Foundation Framework in den Sass-Array $breakpoints
definiert sind.
Für jeden Haltepunkt erhöht er die Anzahl der in einer Reihe des Gitters angezeigten Elemente, indem er seine Breite einstellt, beginnend mit zwei Elementen für die kleinste Bildschirmbreite.
Natürlich muss für das .element die display
-Eigenschaft auf inline-block
gesetzt sein.