J'ai eu une petite situation de conception où je faisais une grille fluide de boîtes avec des flotteurs. Je voulais spécifier très facilement le nombre de boîtes sur une ligne et les aligner contre les deux bords du conteneur. Pas trop difficile, comme nous le savons en ne réfléchissant pas trop sur les grilles et en utilisant le bon dimensionnement des boîtes, vous pouvez obtenir quatre boîtes flottantes dans une largeur de ligne de 25% de largeur - facile.
Mais que faire si vous voulez utiliser une marge entre les cases? Encore tout à fait possible, nécessite juste une réflexion. Supposons que vous en vouliez quatre à la suite, vous devrez déterminer l'espace qu'il vous reste une fois que toute la marge est utilisée. Parce que vous ne voulez pas de marge sur la dernière de la ligne, c'est 3 marges:
100% - (3 * MARGIN)3 correspond vraiment aux "lignes que vous voulez moins une", donc:
100% - ((ROWS - 1) * MARGIN)Ensuite, vous divisez l'espace qu'il vous reste par le nombre de cases que vous souhaitez, ainsi:
(100% - ((ROWS - 1) * MARGIN)) / ROWSVous pouvez utiliser Sass pour cela:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Mieux encore, nous en faisons un @mixin, nous pouvons donc l'appeler chaque fois que nous en avons besoin:
@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; ) )Regardez la vidéo pour en savoir plus sur ce point délicat avec: nth-child
Dans la vidéo, le bit au début avec la boucle Jade, vous pouvez en savoir plus ici.
Et voici le stylo:
Voir la technique simple du stylo pour utiliser Sass pour les lignes par Chris Coyier (@chriscoyier) sur CodePen.