Tuve una pequeña situación de diseño en la que estaba haciendo una cuadrícula fluida de cajas con flotadores. Quería especificar cuántas cajas a lo largo de una fila era muy fácil y hacer que quedaran alineadas contra ambos bordes del contenedor. No es demasiado difícil, como sabemos por no pensar demasiado en las cuadrículas y usar el tamaño de caja correcto, puede obtener cuatro cajas flotantes en una fila con un ancho de 25%, fácil.
Pero, ¿y si desea utilizar un margen entre los cuadros? Aún es totalmente posible, solo requiere pensar un poco. Supongamos que quiere cuatro seguidos, tendrá que averiguar cuánto espacio le queda después de usar todo el margen. Como no quiere margen en el último de la fila, son 3 márgenes:
100% - (3 * MARGIN)3 es realmente "filas que quieres menos una", así que:
100% - ((ROWS - 1) * MARGIN)Luego, divide el espacio que le queda por la cantidad de casillas que desea, así:
(100% - ((ROWS - 1) * MARGIN)) / ROWSPodrías usar Sass para eso:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Aún mejor, lo convertimos en @mixin, por lo que podemos llamarlo cuando lo necesitemos:
@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; ) )Mire el video para aprender sobre ese truco con: nth-child
En el video, el bit al principio con el bucle de Jade sobre el que puede obtener más información aquí.
Y aquí está la pluma:
Consulte la Técnica simple de lápiz para usar Sass para filas de Chris Coyier (@chriscoyier) en CodePen.