Own Responsive Grid for Drupal 7 Views Using SCSS and CSS3 Media Queries

Developing responsive websites I created simple 3 columns grid for Views. It is based on CSS3 media queries, selectors and SCSS. I’d like to share it with you.

Prerequisites

Please create simple View with name Grid. Use one of your existing content types as source (otherwise create a content type with default settings).

Views type: Page
Format: Unformatted list

Views unformatted list settings

Format Settings: by default
Show: Content

Code

Insert the following code into one of your theme SCSS files. I use Zen 5, it natively supports SASS.

@media all and (max-width: 479px) {
  .view-grid.view-display-id-page {
    .view-content {
      .views-row {
        width:100%;
        float:left;
      }
    }
  }
}
@media all and (min-width: 480px) and (max-width: 959px) {
  .view-grid.view-display-id-page {
    .view-content {
      .views-row {
        width:49%;
        float:left;
        &:nth-child(2n - 1) {
          margin-right:2%;
        }
      }
    }
  }
}
@media all and (min-width: 960px) {
  .view-grid.view-display-id-page {
    .view-content {
      .views-row {
        float:left;
        width:32%;
        &:nth-child(3n - 1) {
          margin-right:2%;
          margin-left:2%;
        }
        &:nth-child(3n + 1) {
          clear:left;
        }
      }
    }
  }
}

view-grid - class of the View
view-display-id-page - class of the page view
nth-child - selects elements by a formula

Results

It’s time to test it on different screen resolutions.
The grid should have different number of columns depending on width of screen.

  • 3 columns - width >= 960px
  • 2 columns - 480px <= width <= 959px
  • 1 column - width < 480px

You can see how grid works at tools.responsila.com. It has a bit different breakpoints but the principle is the same.

Alternatives

Enjoy your responsive grid!