col-offset

[gaurav21r]

Wow! @chrisnager ! This is amazing!

Wondering, how to implement an offset like bootstrap's. http://getbootstrap.com/css/#grid-offsetting

[chrisnager]

thanks @gaurav21r! I didn't initially have a way to offset columns with ungrid, but here's a way you could do it. Set a width on the column you intend to offset and add another hidden column to take up the remaining space in the row.

<div class="row">
    <div class="col" style="visibility:hidden"></div>
    <div class="col" style="width:25%">Offset</div>
</div>

hope that helps!

[gaurav21r]

@chrisnager Yep! Workable! Its just that it leads to "div soup". Using so many tags without proper semantics is not advisable on most of the web. I don't know if this contradicts with ungrid's philosophy but perhaps you could keep this issue open till we find a better solution (that doesn't need us to create extra divs)

[Rplus]

👍

[nathco]

Another solution without using extra markup is to insert empty cells with :before and :after pseudo elements. Downside is you can't offset "between" elements, but in many cases this works perfectly fine.

Demo: https://jsfiddle.net/8kbvvd3m/

Alternatively, you can add empty-cells: hide; to the .row class and use an empty .col or <br> where you want offset space. However, this is not the best practice and becomes harder to maintain.

Demo: https://jsfiddle.net/1mzf6h0f/