Trying to get div's to display side by side in a grid using singularity gs

Question

I'm just beginning to get into responsive design techniques using Drupal, Omega 4 theme, and would like to use the singularity grid system. I don't know CSS very well (the basic principles yes, the subtleties no), and SASS seemed a good way to go as a means of escaping some of the more arcane features (a bit like jQuery helps you avoid Javscript). Since I'm really a beginner I thought I would start with a dummy page as simple as possible. So, here is the HTML:

<html>
  <head>
    <title>Singularity HTML Demo</title>
    <link rel="stylesheet" href="stylesheets/test-grid_1.css">
  </head>
  <body>
    <div id="page">
        <h1>Page tests_1</h1>
        <div id="foo">
            <h2>Foo</h2>
            <p><p>Aliquam nulla metus, laoreet non felis ut, commodo laoreet nulla. </p></p>
        </div>
        <div id="bar">
            <h2>Bar</h2>
            <p>Morbi volutpat justo ante, et laoreet est porttitor id. Nullam rhoncus ipsum leo, sed tincidunt ante consequat in.</p>
            <p>Quisque porttitor tincidunt hendrerit. Nulla et urna nisi. Fusce vulputate aliquet posuere. Cras tempor ante vel turpis scelerisque mollis. In bibendum augue in tincidunt vulputate. Donec accumsan sapien et molestie sodales. Maecenas ut arcu et arcu congue rhoncus. Suspendisse potenti. Nulla vehicula est ut ante semper lobortis. Maecenas sit amet porta mi, nec mattis dui. Curabitur tempus, magna a volutpat auctor, tellus diam pretium sapien, a accumsan augue lectus et est. Quisque sollicitudin metus tincidunt massa fermentum; non varius libero bibendum.</p>
        </div>
        <div id="baz">
            <h2>Baz</h2>
            <div>
                <p>Baz</p>
                <p>Vestibulum quis tristique arcu. Cras nec est aliquet, vehicula dolor sed, fermentum eros. Maecenas et commodo diam. Aenean egestas nulla a dolor aliquet pellentesque. Nunc enim tellus, sagittis sit amet ipsum nec, bibendum dictum nisl. Nam sollicitudin quis orci sed consequat. Nam et imperdiet ipsum, aliquam cursus nulla. Morbi erat magna, rhoncus vel velit vel, sollicitudin imperdiet orci. Quisque posuere at leo in pellentesque. Vestibulum ornare nulla odio, id mollis lorem blandit eget. Donec est sem, adipiscing eu ligula at, blandit lobortis magna. Nam tempus, risus vitae lacinia consectetur, leo orci fringilla arcu, facilisis blandit metus leo eget eros. Donec pellentesque est eget nulla ultricies, nec placerat risus sagittis. Nulla elementum metus nisi, eget sagittis risus commodo vitae. Pellentesque imperdiet porta vestibulum!</p>
            </div>
        </div>
        <div id="qux"><p>Qux</p></div>
        <div id="waldo"><p>Waldo</p></div>
        <div id="garfield"><p>Garfield</p></div>
        <div id="dilbert"><p>Dilbert</p></div>
    </div>

  </body>
</html>

I did a sass stylesheet which started off just displaying all the divs in a single column one under the other, and that worked (not difficult!). I wanted to post an image to show my meaning, but apparently I can't!

Then, I tried adding a breakpoint and tried to modify the sass code so that it would display on a 2-column grid, each div being displayed alternately to the left and the right. Here is my sass code using singularity:

@import "singularitygs";
$include-border-box: true;

$break: 500px;
$break2: 800px;
$break3: 1200px;
$include-clearfix: true;

$grids: add-grid(1);
$grids: add-grid(2 at $break);
$grids: add-grid(2 8 2 1 at $break2);
$grids: add-grid(12 at $break3);
$gutters: add-gutter(1/6);

body {
  margin: 0;
  padding: 0;
  @include background-grid;
}

#foo {
    background-color: red;
    color: yellow;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 1);
    }

}

#bar {
    background-color: green;
    color: yellow;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 2);
    }
}

#baz {
    background-color: purple;
    color: whitesmoke;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 1);
    }
}

#qux {
  background: yellow;  
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 2);
    }
}

#waldo {
  background: blue;
    color: whitesmoke;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 1);
    }
}

#garfield {
  background: orange;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(1, 2);
    }
}

#dilbert {
  background: cyan;
    @include grid-span(1, 1);
    @include breakpoint($break) {
        @include grid-span(2, 1);
    }
}

When the breakpoint kicked in, Waldo Garfield and Qux had all moved right up to the top of the display - Foo had become completely invisible and been overwritten. I managed, by fiddling around with the "clear: both / left / right" to get something approaching what I want, but it is hopelessly empirical and I'm quite sure not robust. I must certainly be missing something, but I would be very grateful if somebody could tell me what!

Andrey Mikhaylov - lolmaus · Accepted Answer

When you use grid-span without extra parameters, it spans columns using the Isolation output style. This style makes all columns appear on the same row.

You have two options:

For every element that should appear in the next row, you have to tell that element to do so: clear: both;. This technique is called clearing.
Switch to the Float output style which applies clearing for you automatically. You can do that by any of the three ways:
- setting $output: 'float'; global variable;
- providing the $output-style argument to the grid-span mixin:
  @include grid-span(1, 1, $output-style: 'float');.
- using the shortcut mixin: @include float-span(1, 1);.

Also, consider the following:

You do not need to apply spanning to columns for the default mobile view. Every column is already 100% wide by default.
Consider separating decoration and layout in your stylesheets by either using different partial files or by simply writing layout styles above/below decoration styles.
To apply alternating styles you can use the nth-child pseudo selector. If you need old IEs support, use Selectivizr 1.0.3b and Respond polyfills.

Here's how i would do it. DEMO: http://sassbin.com/gist/7238506/
I've converted your HTML and SCSS into HAML and SASS because they're so much readable and free of visual noise. I also removed the unused grids and breakpoints.

$include-border-box: true

$break: 500px
$grids: 2

+breakpoint($break)
  #page > div
    &:nth-child(2n)
      +float-span(1,1)

    &:nth-child(2n+1)
      +float-span(1,2)

    &:last-child
      +float-span(2,1)

Note how much easier it became to grasp how the columns will be aligned!

UPD 2013-10-31

I would really like to have Baz move up so it starts directly under Foo, and similarly Garfield move up so it starts directly under Qux. But is this even possible?

If column heights are dynamic, then there's no way you can do that elegantly.

In this situation i would put odd paragraphs into one column and even paragraphs into another column, and span these two columns. This will produce the required order on desktop but alter the order on mobile.

If you really-really need to have the described order both on mobile and desktop, then consider either fixing paragraph heights or using JS to reorder paragraphs on window resize.

UPD 2013-11-01

Related issue: https://github.com/Team-Sass/Singularity/issues/143#issuecomment-27547135

Trying to get div's to display side by side in a grid using singularity gs

Tags:

drupal-theming

singularitygs

Joel Guesclin

1 Answers

Andrey Mikhaylov - lolmaus

Recent Activity

Donate For Us

Trying to get div's to display side by side in a grid using singularity gs

Tags:

drupal-theming

singularitygs

Joel Guesclin

1 Answers

Andrey Mikhaylov - lolmaus

Related questions

Recent Activity

Donate For Us