The site design is shaping up to be very grid-like. Our modules will lay out very cleanly into a grid. But aren't grids complex and weird? And maybe we should go use some fancy framework out there? Nah. They're easy. We'll set a simple one up in just a few minutes. The concepts at work here insprired the article "Don't Overthink It Grids."

Of course, we run into a few problems along the way (as you do). In this case, we used an attribute selector that didn't match like we wanted it to.

We also set up a "toolbox" CSS file that will contain classes that are generic, reusable, and kind of globally useful. The first one, as ever, is the Clearfix - a bit of CSS we can use on parent elements that we don't want collapsing because of their floated children. We don't load up this toolbox CSS as a separate file, we @import it into the global.

We get the grid working, but we still have work to do in getting the modules sitting in there correctly and gutters set up.

Comments

I’m not being paid by Gridset to endorse their product, but I have to say the grid layout and the abilities of the overlay script to line things up much tighter and in a responsive way is the bees knees.

I like to start with a number or object that relates to the grid. If you don’t have an object or number then make a number up. 15px gutters are way too small and 60px is way too large. Staying in between 30-40px feels just right -like my porridge.

This is why box-sizing: border-box; rocks my world. Enables percentage based grids not to be ruined by adding in a fixed or px based padding. My life was complete that day.

However, I do disagree on Gridset. While I think it’s a nice GUI and a clever idea, my concern is that if average people or those new to coding don’t understand how the grids work or what they need to consider with the box model it’s not great.

Also – I built my own grid framework a while back using 1140px grid as inspiration but I probably only use it 50% of the time because half the sites are quite unique in terms of layouts etc.

We use CSS3 columns later on in this series for the gallery, so check that out for an example of how that works.

I think of CSS3 columns as for text and simple content, not really for layout. For example, you can’t just say “I want this thing in the third column” – you don’t get that choice. Things just flow into the third column as dictated by the flow. That’s not going to work for most designs.

Around 4:31, you write [class^=’grid-‘] { /* some code*/}. I’m a newb and have never seen that before. Is that type of class selection something that’s built into sass? My limited experience looking at code has led me to believe that this syntax was only for selecting _attributes_ that “begin with”, “contain”, etc., as opposed to elements with a particular class or id name.

That selector means in English: “select elements with a class attribute that starts with ‘grid-‘.”

It has the same specificity as a class selector, so it’s just a shortcut so you don’t have to do like:

<div class="grid grid-1-4">
<div class="grid grid-3-4">

You can just do

<div class="grid-1-4">
<div class="grid-3-4">

And get them both because they both start the same. It might be overly clever though. Current Chris is more inclined to use the actual class name. Partly because that way it doesn’t matter how you order the class names on the element then, like it does if you use “starts with.” You could use *= as well for basically “contains” – but that has it’s fragilities as well.

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.