У меня возникла небольшая дизайнерская ситуация, когда я делал плавную сетку ящиков с поплавками. Я хотел очень легко указать, сколько ящиков в ряду, и прижать их к обоим краям контейнера. Это не так уж сложно, как мы знаем, если не задумываться о сетках и используя правильный размер блока, вы можете получить четыре плавающих блока в строке шириной 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, вы можете узнать больше здесь.
А вот ручка:
См. «Простую технику пера для использования Sass for Rows» Криса Койера (@chriscoyier) на CodePen.