CODEWITHSUNDEEP
csssasssusy
Glitches
Glitches

Reputation: 752

Adding divider between horizontal sass susy grid

I'm trying to figure out how to add vertical dividers between my horizontal layout. I have 3 columns and I'd like dividers to the right and left of the middle column.

Typically I would add an :after rule in CSS to draw it after each element and a :last-child to exclude it from the end, but the problem is Susy's span() function fills up any room available to add a 1 pix divider between the elements.

Here is what my code looks like:

Sass:

nav {
    ul {
        list-style-type: none;
        li {
            width: span(1 of 3);
            float: left;
        }
    }
}

HTML:

<nav>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</nav>

Upvotes: 0

Views: 415

Answers (1)

KatieK
KatieK

Reputation: 13843

The goal of grid system like Susy is to fill up all the available space by arranging elements. But there are a couple of options for adding borders:

1) Add box-sizing: border-box;, probably by putting @include border-box-sizing; in your li declaration. See more on box-sizing.

2) Use outline, which doesn't add to an element's width. Example: outline: solid black 1px;

Upvotes: 1

Related Questions