Ho avuto una piccola situazione di progettazione in cui stavo creando una griglia fluida di scatole con galleggianti. Volevo specificare quante scatole in una riga erano molto facilmente e farle allineare contro entrambi i bordi del contenitore. Non troppo difficile, come sappiamo dal non pensare troppo alle griglie e usando il giusto dimensionamento della scatola, puoi ottenere quattro scatole flottanti in una riga con larghezza del 25% - facile.
Ma cosa succede se si desidera utilizzare il margine tra le caselle? Ancora totalmente possibile, richiede solo qualche riflessione. Supponi di volerne quattro di fila, dovrai calcolare quanto spazio ti resta dopo aver utilizzato tutto il margine. Perché non vuoi il margine sull'ultimo della riga, sono 3 margini:
100% - (3 * MARGIN)3 è in realtà "righe che vuoi meno una", quindi:
100% - ((ROWS - 1) * MARGIN)Quindi dividi lo spazio che hai lasciato per quante scatole vuoi su quel tipo, quindi:
(100% - ((ROWS - 1) * MARGIN)) / ROWSPotresti usare Sass per questo:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Ancora meglio, lo trasformiamo in un @mixin, quindi possiamo chiamarlo ogni volta che ne abbiamo bisogno:
@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; ) )Guarda il video per saperne di più su quella parte difficile con: nth-child
Nel video, la parte all'inizio con il ciclo di giada puoi saperne di più qui.
Ed ecco la penna:
Vedere la tecnica Pen Simple per l'utilizzo di Sass for Rows di Chris Coyier (@chriscoyier) su CodePen.