У мене була невелика дизайнерська ситуація, коли я робив рідинну сітку з коробок з поплавками. Я хотів вказати, скільки ящиків у ряду було дуже легко, і змусити їх змити обидва краї контейнера. Це не надто складно, оскільки, як ми знаємо, не надто продумуючи сітки та використовуючи правильний розмір коробки, ви можете отримати чотири плаваючі ящики в ряд шириною 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.