Menu Search
Jump to the content X

The Semantic Grid System: Page Layout For Tomorrow


CSS grid frameworks can make your life easier, but they’re not without their faults. Fortunately for us, modern techniques offer a new approach to constructing page layouts. But before getting to the solution, we must first understand the three seemingly insurmountable flaws currently affecting CSS grids.

Problems Link

Problem #1: They’re Not Semantic Link

The biggest complaint I’ve heard from purists since I created The 1KB CSS Grid1 two years ago is that CSS grid systems don’t allow for a proper separation of mark-up and presentation. Grid systems require that Web designers add .grid_x CSS classes to HTML elements, mixing presentational information with otherwise semantic mark-up.

Floated elements must also be cleared, often requiring unnecessary elements to be added to the page. This is illustrated by the “clearing” div that ships with 960.gs2:

<div class="grid_3">
<div class="grid_9">
<div class="clear"></div>

Problem #2: They’re Not Fluid Link

While CSS grids work well for fixed-width layouts, dealing with fluid percentages is trickier. While most grid systems do provide a fluid option, they break down when nested columns are introduced. In the 1KB CSS Grid example below, .grid_6 would normally be set to a width of 50%, while .grid_3 would typically be set to 25%.

But when .grid_3 appears inside of a .grid_6 cell, the percentages must be recalculated. While a typical grid system needs just 12 CSS rules to specify the widths of all 12 columns, a fluid grid would need 144 rules to allow for just one level of nesting: possible, but not very convenient.

<div class="column grid_6">
	<div class="row">
		<div class="column grid_3"> </div>
		<div class="column grid_3"> </div>

Problem #3: They’re Not Responsive Link

Responsive Web design is the buzzword of the year. While new tools such as 1140 CSS Grid263 and Adapt.js274 are springing up that enable you to alter a page’s layout based on screen size or device type, an optimal solution has yet to arrive.

Blame It On The Tools Link

All three of these problems directly result from the limitations of our existing tools. CSS leaves us with the ultimatum of either compromising our principles by adding presentational classes to mark-up, or sticking to our guns and forgoing a grid system altogether. But, hey, we can’t do anything about it, right?

Well, not so fast. While we wait for browsers to add native CSS support5 for this flawed grid layout module6, a futuristic version of CSS is available today that’s already supported by every CSS-enabled browser: LESS CSS7.

LESS brings powerful new features to CSS.

LESS What? Link

You’ve probably heard of LESS but perhaps have never given it a try. Similar to SASS9, LESS is extends CSS by giving you the ability to use variables, perform operations and develop reusable mixins. Below are a few examples of what it can do.


Specify a value once, and then reuse it throughout the style sheet by defining variables.

@color: #4D926F;

#header {
  color: @color;

The above example would compile as follows:

/* Compiled CSS */
#header {
  color: #4D926F;

Operations Link

Multiply, divide, add and subtract values and colors using operations.

@border-width: 1px;

#header {
	border-left: @border-width * 3;

In this example, 1px is multiplied by 3 to yield the following:

/* Compiled CSS */
#header {
	border-left: 3px;

Mixins Link

Most powerful of all, mixins enable entire snippets of CSS to be reused. Simply include the class name of a mixin within another class. What’s more, LESS allows parameters to be passed into the mixin.

.rounded(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;

#header {

Verbose, browser-specific CSS3 properties demonstrate the benefit that mixins bring:

/* Compiled CSS */
#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;

Downsides to LESS Link

Having been skeptical of LESS at first, I’m now a strong advocate. LESS style sheets are concise and readable, and they encourage code to be reused. However, there are some potential downsides to be aware of:

  1. It has to be compiled. This is one extra step that you don’t have to worry about with vanilla CSS.
  2. Depending on how LESS documents are structured, the compiled CSS file might be slightly larger than the equivalent hand-crafted CSS file.

A Note on Compiling LESS Link

There are three approaches to compiling LESS style sheets into CSS:

  • Let the browser do the compiling.
    As its name suggests, LESS.js10 is written in JavaScript and can compile LESS into CSS directly in the user’s browser. While this method is convenient for development, using one of the next two methods before going into production would be best (because compiling in the browser can take a few hundred milliseconds).
  • Use a server-side compiler.
    LESS.js can also compile server-side with Node.js11, and it has been ported to several other sever-side languages.
  • Use a desktop app.
    LESS.app12 is a Mac app that compiles local files as they’re saved on your computer.

Introducing The Semantic Grid System Link

The innovations that LESS brings to CSS are the foundation for a powerful new approach to constructing page layouts. That approach is the The Semantic Grid System13. This new breed of CSS grid shines where the others fall short:

  1. It’s semantic;
  2. It can be either fixed or fluid;
  3. It’s responsive;
  4. It allows the number of columns, column widths and gutter widths to be modified instantly, directly in the style sheet.

The Semantic Grid System uses LESS CSS to offer a new approach to page layout.

Configuring the Grid Link

Sounds too good to be true? Here’s how it works.

First, import the semantic grid into your working LESS style sheet.

@import 'grid.less';

Next, define variables for the number of columns, and set the desired widths for the column and gutter. The values entered here will result in a 960-pixel grid system.

@columns: 12;
@column-width: 60;
@gutter-width: 20;

The grid is now configured and ready to be used for page layout.

Using the Grid Link

Now that the grid has been configured, consider two elements on an HTML page that you would like to lay out side by side.


The side-by-side layout can be achieved by passing the desired number of grid units to the .column() mixin (which is defined in the grid.less file).

@import 'grid.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

article {
section {

The above LESS would be compiled to CSS as the following:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 700px;
section {
	display: inline;
	float: left;
	margin: 0px 10px;
	width: 220px;

This page15 demonstrates the result. What makes this approach so different is that it does away with ugly .grid_x classes in the mark-up. Instead, column widths are set directly in the style sheet, enabling a clean separation between declarative mark-up and presentational style sheets. (It’s called the semantic grid for a reason, after all.)

So, What’s Behind the Curtain? Link

For the curious among you, below are the mixins at the center of it all. Fortunately, these functions are hidden away in the grid.less file and need not ever be edited.

// Utility variable — you will never need to modify this
@_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Set @total-width to 100% for a fluid layout
@total-width: @_gridsystem-width;

// The mixins
.row(@columns:@columns) {
   display: inline-block;
   overflow: hidden;
   width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
   margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
.column(@x,@columns:@columns) {
   display: inline;
   float: left;
   width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width);
   margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width);

Fluid Layouts Link

The example above demonstrates a fixed pixel-based layout. But fluid percentage-based layouts are just as easy. To switch from pixels to percentages, simply add one variable:

@total-width: 100%;

With no other changes, the compiled CSS then becomes this:

/* Compiled CSS */
article {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 72.9167%;
section {
	display: inline;
	float: left;
	margin: 0px 1.04167%;
	width: 22.9167%;

This example16 shows how the percentages are dynamically calculated using LESS operations, which also applies to nested columns.

Responsive Layouts Link

No modern grid system would be complete unless we had the ability to adapt the layout of the page to the size of the user’s screen or device. With, manipulating the grid using media queries couldn’t be any easier17:

article { .column(9); }
section { .column(3); }

@media screen and (max-width: 720px) {
	article { .column(12); }
	section { .column(12); }

Try It For Yourself Link

Just a couple of days ago Twitter released a project called Bootstrap18 which provides similar (but more limited) grid system built using LESS variable and mixins. The future of the CSS grid seems to be taking shape before us.

The Semantic Grid System delivers the best of both worlds: the power and convenience of a CSS grid and the ideal separation of mark-up and presentation. Download the grid19 for yourself, fork it on GitHub20, and let us know what you think!

Download the grid from

Further Reading Link


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30

↑ Back to top Tweet itShare on Facebook

Tyler Tate is a user interface designer at Vyre in London. He is the creator of the 1KB CSS Grid, and his latest venture is TwigKit.

  1. 1

    Nice! I’ve been working on something very similar for the last week or so. I’ll definitely update my system with a couple of ideas from Thanks!

  2. 2

    Personally i don’t use grids as i find them more time consuming & over complicated full of html & css i don’t need.

    I have tryed to use them don’t get me wrong i’m not a hater, they are just not for me.

    Others i know would argue how amazing they are, After reading through your article i like the way this works so i may try it out on a small project & see how i get on.

    Nice article.

    • 3

      My opinion was identical to yours, until I sat down and really worked with a few different grids to find the one I liked best. Now that I’ve used them, I absolutely love using grids and find it way faster.

  3. 4

    Wonderfull! I visit the semantic grid system website, and their entire styling is down, so much for good self advertising ey ;)

    But hey things like that happen.

    Personaly i’m not a big fan of al those css systems. I think it feels like i have to do basic things in a strange and odd way. And for somehow i get the feeling it’ll only take me longer.

    I mean, to create simple column layouts, either fixed or fluid i just use normal css and there is no thinkable layout i can’t create with normal css so it just can’t find a good reason to start with those systems…

    Maybe i’m missing the point or advantage?

    • 5

      Maxime Lafontaine

      August 23, 2011 5:35 am

      They forgot to change “text/less” in the for their CSS which are compiled… That why their css does’nt work… The problem is not less in this case ;)

      • 6

        Thanks for pointing that out, I’ve just made the correction.

      • 7

        I know i didn’t bother me. Sometimes little problems occur everyone has them once in a while :)

        But it still was funny though, putting a good word out for a css grid system while the site of that system is lacking it’s complete styling was funny to see :)

    • 8

      Alex, if you are doing simple sites with “one-off” design then you would probably not benefit much from grid systems.

      But, speaking from personal experience, when you develop multi-section content-heavy websites in a CMS, where the content providers may need many different column configurations and page templates, and have new content and page types arise over time, it is a LOT more efficient to use a grid css system to do the math for you, instead of having to do all the calculations for complex layouts for multiple page templates and new content types that arise as the site grows.

      • 9

        This is an excellent point of delineation, Chris! For large sites with multiple devlopers working in concert with each other, or for sites that grow and change and morph over time, grid systems help unify coding styles and make sites more maintainable by a diverse set of programmers.

        But for a one-off site that doesn’t need to be responsive and will only have one developer… grids become less helpful.

      • 10

        Hi Chris!

        I see your point. Fact is i work at lots of supersized online projects. Sometimes sites have multiple templates. But it’s in my believe, that even a xxl online site/project never has to need too many different templates, it kills the flow.

        So even for big projects i can’t imagine myself using like 10 templates or so.

        And the math… well the math to calculate a dozen of templates with different rows and columns etc etc is like elementry school for me so that’s no problem.

        BUT, i still get your point though.

        Allthough i don’t agree with Chris Ames under here, if you create descent code every other developer will understand it, that’s no reason to use a grid system in my opinion. Looking at the way gridsystems call the elements it maybe is even more complicated to work with more developers!

        BUT, again, i’ll give a grid system a shot when i have the time. I’m open for it but never could find a good reason, and still heard of any.

        Good luck to you all :)

  4. 11

    I do use grid system for a series of Gov websites. They must have the same look and feel, but I can change the visual interface. With the grid system, it is so consistent.

  5. 12

    Fernando de Sá López

    August 23, 2011 5:33 am

    Gran artículo!!! datos realmente significativos para la contrucción de web´s

  6. 13

    Just a note about SASS… Yes originally (and definitely still supported) is the .sass extension, a much less verbose pattern which has variables / mixins / etc. and compiles to CSS.

    BUT… they now provide a .scss extension which is also a superset of CSS.

    AND… whether you’re using SASS, LESS, or pure CSS, it’s kind of independent of whether or not you’re using an off the shelf grid system or not.

    Just sayin ;)

  7. 15

    I’m actually super excited about this.

    I don’t currently use grids, for the reasons outlined above. The non-semantic nature and tendency to overcomplicate things means I have often avoided using such systems.

    However, the ability to create semantic grids that can be fluid/fixed as well as responsive means we as web designers/developers can now go about utilising grids, without the pitfalls we may have been subject to before. Sounds like just the solution I’ve been looking for, and one that may convince me make the switch to grids.

  8. 16

    Sass has also now moved to be much more like Less with its scss syntax (i.e. it attempts to be a superset of css).

    Also Susy is a Sass framework which attempts some of the same things as

    • 17

      Steve, I think it’s great that there are 3 or 4 flavours of this idea (Less/Sass/Susy/Compass/etc) floating around out there. But sooner or later, you’re going to have to kick the kid out of the candy store and get some work done. It’s worth sticking your head up and looking around at what else is out there every so often; I generally make a disciplined effort every year or so. with occasional quick glances at the Hype-O-Meter in the interim.I’d been longing after Less for some time, but didn’t want to inject Ruby dependencies into a PHP-based workflow., and its transparent background operation, fix that for me. Sure, (I assume) Ruby’s still there, but it’s packaged up into something else that looks just like something I’m used to managing anyway (a Mac app), and produces CSS output that browsers can’t tell from hand coding. It Just Works — at least for me.

      The nice thing about compiling down to standardised output (CSS, in this case) is that you can just pick up and change tools if the pain of using yours gets too high, or if The Competition brings out some killer feature you just have to have right now. That’s going to both make it easy for people to switch (or mix) tools, and motivate tool developers to keep improving. A definite win for us user-developers.

  9. 18

    This is great. Tons of thanks!

    I have wished for an expression-based styling system for years. IE started with expression() but it lacked the power of variables. LESS solves so many problems that we face in CSS layouts. I wish W3C incorporates this in their standards so that compiling is not required.

    • 19

      I agree with you. I think CSS supersets like LESS and SASS would make a great starting point for a new W3C CSS standard.

  10. 20

    Interesting take on the grid. I’ve felt the same issue with the question of semantics and filling the HTML up with extra classes. This might be an interesting solution. Has also pushed me a little further towards actually trying out some of these CSS processors. I still write everything flat.

    • 21

      Matt: I am reminded of a comment made by a presenter at An Event Apart a couple of years ago, to the effect that one can become so hung up on semantics that you remove all the tables from your house.

      It is always good to strive for semantic markup, but really, no one is going to give you an F if your markup includes a class of grid_X. Don’t sacrifice the good in search of the perfect! IMHO

      • 22

        Excellent point! I’ve had thoughts like this myself. Might have to write a post about this sometime

  11. 23

    So, do you guys think a grid system should have its base column width set with or without the gutter width included in it? doesn’t include the gutter in the base column width, which makes for more complex calculations and requires you to set both gutter and column width when changing the layout.

    Pretty minor stuff, I know, but I’m trying to find the best solution for making a complex grid with multiple levels of nesting, without using any additional container elements. So I was wondering about all this. What do you guys think?

  12. 25

    a tutorial how to use less-compiling with this node-thing and php woud be amazing for the html&css-only folks like me.

  13. 26

    I wasn’t aware there was a sidebar element (referenced in the CSS after article in all the examples) in HTML. Purely good-natured ribbing, though — great post!

    For those curious about Sass, semantic grids have been available for some time in the form of the Blueprint and Compass plugins, but to my knowledge, this implementation goes a bit further to include fluid grid support. Fortunately, LESS code is easily ported to Sass, and vice-versa ;)

    I would also like to throw up a general caution flag since, while this might seem like CSS nirvana to us front-end devs at first, don’t forget that it will inevitably result in generated CSS in the end. Focusing too much on “semantic” classnames could easily end up bloating your CSS. Achieving the right balance between semantics and maintainability is up to you, but it’s a very difficult challenge in my view.

    • 27

      Thanks for pointing out my (repeated) typo Stephen, it’s corrected now!

      While it’s true that in the Semantic Grid each column declaration will add 5 lines of compiled CSS to the compiled stylesheet, one has to remember that Semantic has an 0-line overhead of styles. In other words, only the declarations that are needed get compiled. On the other hand, the traditional grid systems has 653 lines of CSS that the user has to download every time. So, in many cases, will actually have a lighter footprint than traditional grids.

      • 28

        The Sass/Compass plugins for Blueprint and are also implemented as mixins, and all the “non-semantic” classnames are optional. The 960 mixin counterpart of your .column(6) would be @include grid(6), and .row() would roughly equate to @include grids().

        I personally think it’s awesome to have multiple approaches to the same problem, because it lowers the barriers to more developers. I’ve been pretty impressed by the way InuitCSS handles its grid layouts, requiring no “first” or “last” constructs by using a clever negative-margin trick on the container.

  14. 29

    I have been using something similar in Sass in my personal projects: (SCSS version by ricardohsd)

    It’s based on but no where near as flexible as the example posted above. It might make a good starting point for someone though.

  15. 30

    Guilherme Ventura

    August 23, 2011 6:52 am

    I like to use LESS, and this approach to the Grid System seems to be really awesome, but i don’t trust 100% on LESS because it have some dependences (for example: node.js and a .js file), anyone already has gotten a problem using LESS?


  16. 34

    Interesting article. I am also working in a project where I wrote a dynamic grid,, is one part of the overall styleguide concept. Interested in your LESS solution to grids compared to mine. Thanks for posting.

  17. 35

    One of the things I like about 1140gs is that it will reflow the columns down for mobile. In other words, at some point columns that are to the right will be reflowed under columns to the left.

    Is that possible here?

  18. 37

    Be warned that LESS (and SASS) have more downsides. Here is an german article about the negative aspects of CSS frameworks:

  19. 38

    Great article.
    Grids are for web designers the first rules to consider before starting work, and thanks to less to bringing us this fancy clever way to work with.

  20. 39

    This article could have done with some technical editing. Sass (SCSS syntax) has been a *true* superset of CSS for while now. Less is not a true superset. Lines like “Unlike other tools such as SASS and CleverCSS, which try to reinvent the CSS syntax” are not only factually incorrect but also misleading.

    Here is a comparison of Less/Sass:

    Also, from the Sass homepage:

    “The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.”

    • 40

      I don’t have any grudge against SASS; LESS and SASS have a lot of similarities, and I think they both make a lot of sense. When first comparing CSS frameworks, however, I chose LESS because of it’s more native syntax, which of course SASS later adopted as well. Also, while the sentence structure is a bit ambiguous, I wasn’t implying that SASS *isn’t* a superset.

      • 41

        Ah, no worries. I came across as a bit sour, which I didn’t intend. Sorry. You’re doing great work here and CSS pre-processors need all the publicity they can get. Who knows, one day the ideas contained within them will be developed into standards.

        • 42

          Thanks for understanding, and for pointing out the issue. We’ve changed the text to be much more favorable towards Sass, which it should have been in the beginning.

          By the way, I’d love to start offering for multiple CSS frameworks including Sass. Hopefully I can get to it sometime in the near future.

  21. 43

    Hi Tyler,

    great article I’m looking forward to start testing this out.

    I’m pretty sure this has something to do with a local setting but I can’t seem to find the reason, I keep getting this error message and the CSS is not being compiled:

    “Access to restricted URI denied”

    My guess is that it has something to do with type=”text/less”

    do I need to put the sample files on a web server even to work on client side compiling?

    • 44

      I was having the same issue, however moving the html file to the root directory fixed it.
      Move whichever example html file you are using into the folder that contains the css & js folders and then update your links in the corresponding .less file.

      • 45

        Hi rgudinho,

        I’ve been struggling with this one (and am dangerously close to abandoning LESS altogether as a result).

        The location of the .less and JS file don’t seem to matter as an “Access to restricted URI denied” error appears, regardless of the paths to these files.

        Did you ever figure this one out?

        Any input or direction would be greatly appreciated.


        • 46

          Ok, worked it out, FINANLLY!!

          Had to put the html file in the root directory as John says, but also had to add the LESS file there too and change the @import file paths in that file.

          @import ‘stylesheets/reset.css’;
          @import ‘stylesheets/demo.css’;
          @import ‘stylesheets/less/grid.less’;

  22. 48

    great remake folks, thanks for staying ‘smashing’ ;)

  23. 49

    I’m surprised to see Compass mentioned only once, and in the comments at that. While LESS is aimed at a much wider audience(since it can be compiled by a multitude of ways using js) Compass is still a very powerful framework(not to mention with the advent of the web dev frameworks for static sites like -HAML templating for web designers) — it supports a multitude of other frameworks:, from blueprint, 960, and yes, Less too.

    As mentioned above, SASS also has the alternative SCSS syntax for those hesitant to switch to none-curly-brace syntax :)

    In any case, it was a good read, especially the fluid layouts part. Some of the leading grid-layouts today still feels hard to play around with when going the fluid/responsive layout way.

  24. 50

    “Susy”: for Sass / Compass does the same thing, but there is no mention of it here. Were you not aware of that project? If you referenced Susy, I think some credit should be attributed to its creators. The similarities are rather striking.

    • 51

      I wasn’t aware of Compass for Sass until after the article was published (haven’t used Sass before). But you’re right, we should add a link to it in the article.

      • 52

        It’s a peculiar oversight to be in this line of work and not be aware of Compass/SASS! :)

        Until last year, I was also working with a similar approach with LESS (see slides – before SASS 3 introduced scss. Since then (perhaps until Twitter Bootstrap reintroduced LESS as a contender?) there has been a lot more activity and adoption around SASS.

        I know things change fast on the web, and Sematic/Less could end up surpassing Compass/SASS, but I would advise folks to look at the documentation on before deciding on a framework.

  25. 53

    I will def give this a shot on my next project. Thanks!

  26. 54

    And what happens when js is disabled?

    • 55

      i played around with lessphp and now it works. i don’t like to depend on js layoutwise.
      the problem: there are some differences between less.js and lessphp. but it seems it is possible to realize an lessphp version of
      you need to change an “,” against “;” so seperate values for instance. but there seems to be some more problems. im an less.js novice…so maybe some of the experiencend guys likes to transfer to an lessphp-version ?

      • 56

        LessPHP is getting closer to less.js all the time, so I don’t foresee that being a problem as it evolves. I’ve just implemented a fluid layout with the latest lessphp without any problem.

      • 57

        When I discovered SASS last year, I used phalmp for the same reason (SASS to avoid the dependency on JS which came with LESS, and PHP because we were on Windows and didn’t want to try and install Ruby) and found it to be really buggy. In the end I could only use a very little of what SASS had to offer, which was disappointing, and other developers were angry about having to wait for the recompile to happen. Technology moves on and things improve, but having been burnt by this experience I would not be in a hurry to use any compiler except the original one used by the language’s creators.

  27. 58

    Just to mention… a proper fluid grid system for

    • 59

      +1 GGS is a brilliant grid system (also uses LESS)… the way it “folds”, uses box-sizing: border-box, and a zoomable baseline makes it well worth a look for anyone digging into fluid/flexible grids.

  28. 60

    If you’ve built a responsive layout before, then you know how complex the grid can get. This will save me a lot of time in the future. Thanks!

  29. 61

    Fantastic, great use of LESS.

    I’ve also made a little set of LESS tools for responsive/fluid layouts. Takes the maths out of it all!

  30. 62

    My concern about responsive layout is, what happens to the content? if div of e.g. 400x100px with 1500 characters inside will be downgraded to a 50x125px dimension div than the 1500 characters won’t pass in those fields. I think responsive layouts must used far more carefully not just only with css, the content must be sized for different devices as well. This is a far more complex task than just editing some line of css.

    my 2 cents

  31. 63

    Hey, thanks for this article.. Looks interesting. I just wonder what would happen once you have attached styles to the element tags e.g. In your example what would happen if I nested an article in another article, or in a sidebar? Doesn’t it require me to be more careful about how I define my markup?

    • 64

      My CSS selectors were very concise in the examples. Realistically, the article and section elements would often need a class or ID so that styles aren’t accidentally applied more broadly than intended.

      • 65

        I’ve created a SASS script that does the same but allows you to pass in padding and border of the element you want to conform to the grid. Using your example it would allow the and to have their own styling and not just be grid objects. It even allow for you element to be asymmetrical.

        You should also change your margin property to a margin-left and margin-right as you are overriding margin-top and margin-bottom unnecessarily.

        Also I’d recommend breaking up all those parentheses into variables on multiple lines to make your code easier to understand. As the .less gets compiled there’s no need to compact everything onto one line.

        • 66

          Hi moefinley,

          I have been working on a script to add padding to grid elements (particularly where background colours feature). Are you ok to share your script so I can see what you have come up with?


  32. 67

    I just started using ‘SASS’ (, can you tell me how it is different from ‘LESS’? It has all the same things it seems.

  33. 68

    How does this grid system deal with the margin right or left when you place multiples images in columns for a portfolio page for example, it adds a class to every last element or it uses a negative margin like in this article:

    • 69

      Every column gets margin: 0 10px; (or whatever the actual value is). Rows contain negative margin. There’s no first/last selectors used.

  34. 70

    LOVE IT. Excellent work. I had this same exact idea recently, but now you’ve saved me the work of creating it myself. Thanks!

  35. 71

    another day another grid system…

    j/k — looks like some great inovations, can’t wait to try it out

    b r e n t

  36. 72

    Can people stop recommending LESS? Development on it is practically non-existant these days, and its still full of bugs that will make your life hell when you start using it at scale. (It makes for fun looking tutorials, but who cares.)

    Look at SCSS instead. Actively developed, and CSS syntax.

  37. 73

    1) css will always be a pain to work with, no matter what tools are made available. I really appreciate the hard work of the developers of these tools, but the fact remains – css is painful.

    2) Despite the coolness that css frameworks bring to the table, I always brush up against their limitations quickly and hard. I always have some basic requirement that the frameworks do not meet. Again – I appreciate the hard work that the developers put into the frameworks. But each one is built by their respective developers for their own needs. As such, they are always lacking when it comes to my own requirements.

  38. 74

    Not to be picky or anything, SASS is also a superset of CSS :-)

    All the things (and more) you’ve shown can also be achieved in SASS. If you’re going to state something, get it right ;-)

    • 75

      Thanks for pointing out, we’ve updated the text. And yes, I’m hoping to port over to SASS as well in the future.

  39. 76

    Awesome stuff! I’ve been using this method for a few months now as I described in a blog post earlier:

    Your system looks a lot cleaner than what I’m using so I’m definitely going to look into it. I’m wondering how you manage clearing floats etc.

    I do have some tips after having used this system in several projects.

    Tip 1: When making something responsive it’s always best to start with the mobile first. It’s a best practice anyway, but the CSS default (which don’t float anything) is a lot more suitable for a one column layout. A regular layout probably has a lot of floats, which will all need to be reset for a nice one column layout.

    Tip 2: LESS is great, but don’t use the nesting to much. It can make the compiled code a lot larger. It looks like it improves readability, but that’s not the case if you can’t see in what block your currently editing because the opening bracket is not in view (if you use media queries you have probably some experience with this: “In what query am I working now?”). It will also come back and bite you if you introduce media queries since (because of specificity) you will have to make big, big selectors before your new styles get applied.

    It’s hard to go back to the old way of doing things, but I now that a lot can be improved in how I do things now. Hopefully your work will improve mine!

    • 77

      Re ‘Tip 2’ – I second that. I’ve only used nesting with SASS, and while the nesting hierarchy looks really cool/progressive in your code editor, the generated selectors can be much longer than hand-coded selectors. However, my experience was with using @mixins rather than @extends due to bugs with the latter in phamlp, so it’s possible that others may be able to generate more optimised code.

  40. 78

    An interesting and timely article, I had an investigation in making an semantic and responsive grid with Sass only the other week.

    Arguably the mark-up looks better but at the same time you do can make a trade off for file size depending on how many times you include the columns function. But this is definitely the way we should be going.

    • 79

      Nice one! You’re fortunate that in SASS you can nest the @media queries. I wish that was possible in LESS.

  41. 80

    great article.. I had used an early version of less but didn’t really get into it too much. seems like it’s worth re-checking it, thanks.

  42. 81

    Is it just me, or does this system make things overly complicated compared to the “good old” html and css?

    While I see the benefit of having a responsive design, I personally believe that people see it as the holy grail. Not every website benefits from a responsive design imho, just as nog every website benefits from a fluid design.

    About LESS:
    I can really see some handy little timesavers with this system, but also one downside that wasn’t mentioned in the article:

    If you specify a color or column width with LESS, and you have to make changes 2 years from now, you’d have to read all the code to figure out what you did back then, like for example: “now I knów I specified my text to be #e2e2e2 with LESS, but where’s that used in my CSS again?” If you have that color set for, I don’t know, 6 different locations and you need to change 2 of them, it would mean (I think) a lot more going back and forth compared to just go to those 2 pieces, change them, and be done with it :)

    You’ll be forced to go back and forth too much to see which piece of code is used where, since you specified LESS at the top of the page, while your actual code might be used throughout the page. Isn’t that a far more roundabout way of doing things?

    Somehow it feels like people are trying to devise systems to make things easier when you start a new website, but don’t always fully realize that there might be other people who eventually have to dig into their code. Person A might use LESS, leaves that company in 2 years, and Person B who never used LESS before (because no one ever does 100% the same in webdevelopment) has to figure out what to do with it. Why not use nice and clean semantic code, and try to devise a simple-to-use-for-everyone system? :)

    (I’ll probably kick a lot of people’s legs with this comment, but I think it’s important not to forget that you’re also coding for the next employee or company, and therefore have to remember that not all systems are ment for everyone and thus perhaps not the best thing to use) :)

    • 82

      You ain’t kicking my leg! :)

      I totaly agree.

      Over the years developing tons of sites ( small and large ) i’ve gathered my own set of re-usable templates with wich i can create complex layouts within minutes.

      And i would be suprised if not almost every experienced developer has their own set.

      And indeed, that responsive trend lately is way overcooked. People tend to look way too much at what is the latest fuzz rather than looking at what is needed: Don’t create something with what CAN be used, create with what you need.

      • 83

        Joram Oudenaarde

        August 25, 2011 9:58 pm

        Thanks :)

        With people like Mark Boulton, who is absolutely brilliant by the way, apparently going full throttle on responsive design, other webdesigners are seemingly tending to simply “obey and follow”. Webdesign has and always will need a level of consistency between them and the other webdesigners, but that doesn’t mean they should simply follow 1 solution to 1 certain problem for a specific client… they should still find their own solution for each and every client based on what the client himself needs, and then code/design that with the consistent techniques that are available without having to consort to a single “hyped up” way of doing things.

        I personally believe responsive design is a trend that acts as a temporary solution. When I asked around, a lot of people didn’t want to see websites that change according to what the creator of that website wanted. They simply wanted to see the website as they’re used to, on every and any device. And if they have a slow or limited connection (like mobile internet), they should be given the choice instead of to be forced to watch slimmed down websites right from the start. For me personally as well: I’d rather wait 5 more seconds to see a beautifull website than a “mobile one”, even if that means I might be using my data cap a lot faster. :)

  43. 84

    Wow… wow… wow! You’ve added dripping chocolate sauce and four-wheel drive capability to my web dev! How awesome is that!

    Thank you! Love it!


  44. 85

    Great article.
    I’ve just started with something similar in SASS. Saved me a lot of work. Big thanks.

    I question doh, since I’ve everything else made in sass i would like to keep working with that instead of less. But there is one thing that I don’t get how to translate into sass.
    It’s the argument used within the mixins. Someone knows what the syntax would be in sass for this?

    I get it to:
    @mixin column ($x,$columns:$columns)
    But what are the x and the colon for? I get an error when passing the column argument here. But only when using i fluid layout.

    • 86

      Found the solution I think. The problem was’t in the mixin. The problem was the 1px declared in the Utility variable, I removed the “px” and left the “1” by itself and the error disappeared. Otherwise it tries to declare a width that is set in both px and %.

      • 87

        Wondered about the same thing reading the tutorial… “how does 1px transform into %??” Thanks for confirming :)

  45. 88

    Antoine Lefeuvre

    August 24, 2011 7:31 am

    Many thanks for these great article and GS. A few weeks ago we gave a try to a CSS-only fluid GS featuring the 144 rules you mentioned. It’s called la Grid
    Nevertheless the CSS-only approach limited us, so I’m pretty sure we’ll soon go for a JS-based solution like yours. Merci !

  46. 89

    Having been using 1140 grid for a while now I am excited to see the extra functionality and control this system adds. I also am very impressed with LESS and want to try it out.

    However I downloaded and none of the example files work for me. They are all stuck at 1 column for each row.

  47. 90

    The idea presented here is in it’s simplest form. Simple html and simple designs. In attempting to architect it for some sites I’m working on I ran into complexities not easily seen on the surface.

    For example, say you have an aside inside an article and for a box of content in a sidebar. One case the aside is for the article and one case the aside is for page. Or, you have an article in the main content and an article snippet in the right sidebar. Both should use the article tag. Or, you the main content that may show an article or a section. But, you use section elsewhere as well.

    These complexities are perfectly valid semantics. But, implementing them with would produce more complicated and difficult to understand less/css than using something like looks like it would work for something simple. Does anyone have an example where it scales in complexity of content?

    I took a little time to look at the structure of my markup and cannot achieve a smaller or less complex base html structure using I found this to be unfortunate. It’s a matter of the limitations I can achieve with css rather than anything else.

    I could see using this for a simple site but anything complex I see more work. Something I find unfortunate.

    • 91

      Thanks for your comments Matt. You’re right, I’m using the simplest of elements and selectors in these examples. In the real world, you would almost never apply structural styles to ALL articles or ALL sections. Instead, one would have to use more specific CSS selectors and add ids or classes to elements.

      Semantic will not help you achieve simpler *markup* than other grid systems. But it will help you avoid placing presentational statements in your HTML.

  48. 92

    using less and rendering on the client is a brutal idea unless it’s in development only (though that’s easy to get around anyway). The feature-set of LESS is pretty inferior to Sass/Stylus though

    • 93

      TJ, native CSS has a “minimal feature set” – this is what make it so accessible. I think LESS’s feature set hits a sweet point for it’s target audience. CSS has never been about program logic or complexity.

      LESS.js biggest selling point is that it radically lowers the “barrier to entry”. This should not be underestimated. I’m sure many frontend dev’s shy away from terminal… or are on Windows.

      I agree that pre-compiled (and minified) LESS to CSS is not doubt the way to go for production. But… having a client-side compiler potentially opens doors for inovation e.g. in user-customised styles …theming, overriding media queries, etc. If such options are only presented to users in running HTML5 localStorage capable browsers – via Modernizer/yepnope tests/loading – then performance is (hypothetically) very close to native file cached resources.

      This could take Responsive Design up a notch. Currently we make assumptions like <480px width = mobile & white-on-black is what my designer likes for contrast …. but with LESS.js the power could be given back to the end-user to recompile the CSS (and have it cached), with what THEY want e.g. "force desktop 1024 layout", or "black-on-white text colour" … sure css classes or separate stylesheets could do the same in many cases … but I have a feeling there is more power to explore in this area of users personalising their UI/UX via re-compiled CSS.

  49. 94

    Another, example of a programmer( actual or similar mind set )
    complicating what is to be simple,…

    The semantic / management aspect is lost, you have simply moved the
    DRY method from well formed CSS to the LESS method,…


    Complicated, lost DRY method, third party reliance, and increased file sizes
    along with the need to complied,…

    The next should be better, not increased its complexity,… – Brianui

    • 95

      There is always a tradeoff between achieving semantic purity vs. developer simplicity. But just like we no longer use font tags in our HTML (which is probably “simpler” than using CSS), abstracting content from presentation has significant long-term advantages.

  50. 96

    I just wish regular old CSS would let you proclaim variables.


↑ Back to top