Home/ Questions/Q 8947539
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T12:47:16+00:00

I am trying out zen-grids for a website re-design. I like its general ability

  • 0

I am trying out zen-grids for a website re-design. I like its general ability to produce a grid based, responsive design without putting everything into extra <div>s and adding layout related class names to the tags. I use SASS/Compass anyways, so zen-grids is an obvious choice. But I have a hard time to figure out how to best achieve the following “floating list items” effect (e.g. for a typical product grid in a web store):

<html>
  <head>
    <style>
    ul {
      width:100%;
      list-style-type:none;
      margin:0;
      padding:0;
    }
    li {
      width:25%;
      height:10em;
      background-color: silver;
      float:left;
    }
    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>

Say I have a 12 column layout ($zen-column-count: 12;), how could I use zen-grids to put four list items covering three grid columns each next to each other into one row? The only possibility I see myself is to use four different CSS :nth-child pseudo classes and @include zen-grid-item(3, [start column here]);. This rules out all Internet Explorer versions below 9, lacking implementation of that pseudo class.

Does anybody know how to do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Salsa magic

    I solved the problem by changing the tools: Tsachi Shlidor‘s Salsa is an alternative grid layout system for Sass, which makes the following solution without :nth-child() possible. I added a little respond-to responsiveness as well.

    style.scss (compile with compass)

    @import "salsa/salsa";
$base-font-size: 100%;
$base-line-height: 1.5em;
$container-width: 100%;
$gutter-width: $base-line-height;

@import "respond-to";
$breakpoints: "wide screen" (50em),
              "narrow screen" (0em 50em);


body {
    @include container;
}
ul {
    list-style-type: none;
    padding-left: 0;
    li {
        height: 10em;
        background-color: silver;
    }
}
/* layout for narrow screens: 2 items per row */
$columns: 8;
@include respond-to('narrow screen') {
    ul {
        li {
            @include grid(4);
        }
    }
}
/* layout for wide screens: 4 items per row */
$columns: 16;
@include respond-to('wide screen') {
    ul {
        li {
            @include grid(4);
        }
    }
}

    index.html

    <html>
  <head>
    <link rel="stylesheet" href="style.css"/>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
    </ul>
  </body>
</html>
    • 0