Imao sam malu dizajnersku situaciju kad sam izrađivao fluidnu mrežu kutija s plovcima. Htio sam precizirati koliko je okvira u redu bilo vrlo jednostavno i isprati ih uz oba ruba spremnika. Nije previše teško, kao što znamo iz nepromišljenih mreža i korištenjem odgovarajuće veličine kutije, možete dobiti četiri plutajuće kutije u širini reda 25% širine - jednostavno.
Ali što ako želite koristiti marginu između okvira? Ipak potpuno moguće, samo treba malo razmisliti. Recimo da želite četiri zaredom, trebat ćete shvatiti koliko vam je prostora ostalo nakon što se iskoristi sva margina. Budući da ne želite marginu na zadnjoj u nizu, to su 3 margine:
100% - (3 * MARGIN)3 je stvarno "redak koji želite minus jedan", pa:
100% - ((ROWS - 1) * MARGIN)Tada preostali prostor podijelite s koliko kutija želite na tome, pa:
(100% - ((ROWS - 1) * MARGIN)) / ROWSZa to biste mogli koristiti Sass:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Još je bolje da od toga napravimo @mixin, pa ga možemo jednostavno nazvati kad god nam zatreba:
@mixin rowMachine($numPerRow, $margin) ( width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow); &:nth-child(n) ( margin-bottom: $margin; margin-right: $margin; ) &:nth-child(#($numPerRow)n) ( margin-right: 0; margin-bottom: 0; ) )Pogledajte videozapis da biste saznali više o tom škakljivom komadu s: nth-djetetom
U videu, bit na početku s Jade loop-om možete saznati više ovdje.
A evo i olovke:
Pogledajte Tehniku jednostavne olovke za upotrebu Sass for Rows Chrisa Coyiera (@chriscoyier) na CodePenu.