CODEWITHSUNDEEP
htmlcsssusy
totalnoob
totalnoob

Reputation: 2741

Susy grid alignment a bit off

Learning Susy, lovin' it. Having a few quirks while testing simple things though. I'm trying to create two half width columns side by side with some gutter space in-between and a full width column after it. The problem is the second half width column (y) doesn't float entirely to the right. If I removed the padding: 5px completely, that column is still about 1px off and doesn't align with the full width column (z)

Html

<div class="row">
    <div class="left">x</div>
    <div class="right">y</div>
</div>

<div class="row">
    <div class="full">
        z
    </div>
</div>

Sass

$susy: (
     global-box-sizing: border-box,
     gutters: 1/4,
     gutter-position: outside
);

.row { 
     @include container(320px); 
}

.left {
    @include span(1 of 2);
}

.right {
    @include span(1 of 2);
    @include last;
}

.full {
    @include span(2 of 2);
}

.left,
.right,
.full {
    border: solid 1px #000;
    background: #fff;
    margin-bottom: 25px;
    padding: 5px;
 }

Here's a jsfiddle of the outputted code :

JSFiddle

Why isn't it aligning properly?

The issue probably isn't with Susy itself, but am I using it properly / Is there a better way of doing the same thing and have it float to the right on its own? the following code outputs a float: left as well as a float: right in the same class for .right, seems unnecessary.

Upvotes: 0

Views: 187

Answers (1)

Lucio Rubens
Lucio Rubens

Reputation: 555

The only problem is that for someone reason the global-box-sizing: border-box parameter not working.

.full {
   @include span(2 of 2 border-box);
}

SassMeister

Upvotes: 1

Related Questions