How to handle repeated grid patterns Singularity gs

Question

I am building a blog homepage that shows 10 blog posts in 5 rows and 2 columns. Each column takes 50% width and floats left. If I used bootstrap's grid I would be using .col-md-6 for each blog article.

How do I achieve this using singularitygs

@include add-grid(1 1); // Defines a grid of 2 columns
article {
  @include grid-span(1,1);
}

Here I am telling it to position the article in the first column. How do I create a grid class that is independent of position from where I am spanning it?

Do I just do my own CSS like below?

article {
  width: 50%;
  float: left;
}

I want to use a single class for all the blog posts to achieve this behavior.

Answer 1

Bootstrap uses what Singularity calls the Float output style. With Singularity 1.2+, you can change your output method using @include sgs-change('output', 'float');. In addition to grid-span, the output styles that come with Singularity provide output-specific span mixins as each output style has a slightly different mental model, which these cater to. float-span is the Flout output style's span, it's well suited for multiple items butted up against each other on a symmetric grid, like what you have.

Bootstrap currently has fixed gutters, not fluid gutters, so you will need to set Singularity's gutters either to 0 or to a fixed number for fixed width gutters (done by adding padding inside). If you add padding, be sure to change the item's box model to border-box.

One difference you're going to have, and need to take into account either way you proceed, is that the first item in each row is going to need to clear the direction everything is floated (in this case, clear: left. This can be done with nth-of-type(odd), but keep in mind that type is tag, not class, and may not produce exactly the results you're looking for (should for about 90% of your usecase). If you don't do this, there's a chance that different sized content will make for awkward rows.

For a demonstration of all of this, see this SassMeister example.