Имах малка дизайнерска ситуация, когато правех течна мрежа от кутии с плувки. Исках да уточня колко кутии в един ред е много лесно и да ги изравня с двата ръба на контейнера. Не е твърде трудно, тъй като знаем от ненадмислянето на решетките и използването на правилното оразмеряване на кутията, можете да получите четири плаващи кутии в ширина на реда 25% ширина - лесно.
Но какво, ако искате да използвате поле между полетата? Все още напълно възможно, просто изисква известно мислене. Да кажем, че искате четири подред, ще трябва да разберете колко място ви остава след използването на целия марж. Тъй като не искате марж на последния от реда, това са 3 полета:
100% - (3 * MARGIN)3 е наистина „редове, които искате минус един“, така че:
100% - ((ROWS - 1) * MARGIN)След това разделяте мястото, което ви остава, на това колко кутии искате на този лайк, така че:
(100% - ((ROWS - 1) * MARGIN)) / ROWSМожете да използвате Sass за това:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Още по-добре, превръщаме това в @mixin, така че можем просто да го извикаме, когато имаме нужда:
@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; ) )Гледайте видеоклипа, за да научите за този труден бит с: nth-child
Във видеото, малко в началото с цикъла Jade, можете да научите повече за това тук.
И ето писалката:
Вижте Pen Simple Technique за използване на Sass for Rows от Chris Coyier (@chriscoyier) на CodePen.