Susy gallery()

"The only requirement is Sass, but Susy was built to be part of the Compass[an open-sourceĀ CSS Authoring Framework.] ecosystem, and we recommend pairing with tools like Breakpoint and Vertical Rhythms."

The Perfect Case

Code

How??

.card {
    width: 32.20339%;
    float: left;
}

.card:nth-child(3n+1) {
    margin-left: 0;
    margin-right: -100%;
}

.card:nth-child(3n+2) {
    margin-left: 33.89831%; // leaves a margin btw of 1.69492%
    margin-right: -100%;
}

.card:nth-child(3n+3) {
    margin-left: 67.79661%; // 67.78661% - 33.89831% = 33.89831% || 33.89831*2 = 67.78661
    margin-right: -100%;
}

Output

nth-child(3n+1)

nth-child(3n+2)

nth-child(3n+3)

basically....

Susy gallery()

By Amber Febbraro

Susy gallery()

  • 264