Tive uma pequena situação de design em que estava fazendo uma grade fluida de caixas com flutuadores. Eu queria especificar quantas caixas em uma linha era muito fácil e colocá-las alinhadas em ambas as bordas do contêiner. Não é muito difícil, como sabemos por não pensar demais em grades e usar o dimensionamento de caixa correto, você pode obter quatro caixas flutuantes em uma linha com largura de 25% - fácil.
Mas e se você quiser usar margem entre as caixas? Ainda totalmente possível, requer apenas um pouco de reflexão. Digamos que você queira quatro em uma fileira, você precisará descobrir quanto espaço resta depois que toda a margem for usada. Porque você não quer margem no último da linha, são 3 margens:
100% - (3 * MARGIN)3 é realmente "linhas que você quer menos um", então:
100% - ((ROWS - 1) * MARGIN)Em seguida, você divide o espaço que você deixou por quantas caixas você deseja naquele tipo, assim:
(100% - ((ROWS - 1) * MARGIN)) / ROWSVocê poderia usar Sass para isso:
$numPerRow: 4; $margin: 2%; width: ((100% - (($numPerRow - 1) * $margin)) / $numPerRow);Melhor ainda, transformamos isso em um @mixin, para que possamos chamá-lo sempre que precisarmos:
@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; ) )Assista ao vídeo para aprender mais sobre aquela parte complicada com: nth-child
No vídeo, a parte inicial com o loop de Jade, você pode aprender mais aqui.
E aqui está a caneta:
Veja a técnica Pen Simple para usar Sass for Rows de Chris Coyier (@chriscoyier) no CodePen.