Wanting to display a float-span grid

Question

With Drupal views output I am wanting to display a tiled grid of query results using float-span as described here

Please see comments in sassmeister css source for better explanation of what I am trying to achieve.

Play with this gist on SassMeister.

Any help most appreciated.

Answer 1

You did three mistakes.

1. Wrong syntax for Singularity grid/gutter definition

You used the old Singularity 1.0 syntax:

$grids: 12;
$gutters: 1/3;

Since Singularity 1.2, the correct syntax is as follows:

@include add-grid(12);
@include add-gutter(1/3);

See the Creating Grids wiki page.

2. Using padding on grid items with the content-box box sizing model

By default, browsers use the content-box box sizing model. This means that the resulting width of the element is calculated by adding element width, element padding and element borders.

Singularity spans grid items so that they occupy 100% of the container width. Once you apply padding and width to grid items, the the resulting width becomes more than 100%, and the last grid item in a row drops to the next row.

There are two solutions to this issue:

1. Do not use padding and border on grid item outermost container. If you need padding and/or border, create a subcontainer:

   <div class="tile">
     <div class="tile-border-padding">item one</div>
   </div>
   

2. Switch the box-sizing model to border-box. This is the recommended approach. It is common to apply border-box to all elements on the page.

   The simplest method to do it is to install the Toolkit Sass library and to import its kickstart module. This module applies the following CSS:

   *, *:before, *:after {
     -moz-box-sizing: border-box;
     box-sizing: border-box;
   }
   
   img, video {
     max-width: 100%;
     height: auto;
   }
   

   As you see, it applies both border-box to all elements and makes all images and videos responsive. If you don't want the images to be responsive, consider using the box-sizing mixin from Compass or simply applying box sizing manually.

3. Forgetting to properly span the last item in each row

Most grid systems, and Singularity is not an exception, follow this rule: if there are N items in the row, the number of gutters in that row will be N - 1.

In other words, a if you want 4 items in a row, there should be 4 items and 3 gutters. Singularity would calculate such item and gutter widths that 4 items + 3 gutters result in 100% width.

|                                                   |
 [ITEM][gutter] [ITEM][gutter] [ITEM][gutter] [ITEM]

Singularity's float-span(3) mixin applies right gutter to the element. So when you do

.tile { @include float-span(3); }

you end up with 4 items + 4 gutters in a row, the resulting width will be more than 100% of the container, and the last item in the row with its gutter will drop to the next line.

|                                                   |
 [ITEM][gutter] [ITEM][gutter] [ITEM][gutter] [ITEM][gutter]

The solution is to explicitly tell Singularity that the last item in each row should have no gutter:

.tile {
  @include float-span(3);

  &:nth-child(4n+4) {
    @include float-span(3, last);
  }
}

We're using the the :nth-child(Xn + Y) pseudoclass here. X is the number of items in each row and Y is the number of the target item in a row. As we're targeting the last item in each row, X is equal to Y.

Result

Here's the demo with all these issues fixed: http://sassmeister.com/gist/5b6f0dbe99c7129a8ef6

Have a nice day!