Basic Grid

Version 2.0 by Alex Moschopoulos

Download (ZIP) | Fork on Github

Introduction

Basic Grid is a simple customizable CSS grid framework originally inspired by Bootstrap. Version 1.0 utilized floats and margins like Bootstrap, but with CSS Grid now the new standard, I wanted to make a new version of this system that utilizes CSS Grid as the backbone.

While this is a solid system for quick prototyping and even full builds, I will impress that it barely uses all the functions and options in CSS Grid Layout, and I would still suggest to those seeking to do more in their layouts to learn CSS Grid in full and create your own grids as you see fit.

If you like and want to use this system (or your own grids), I also have a responsive header navigation that sizes into a CSS-only hamburger menu, built using CSS Grid. You can check it out here.

Like with version 1.0, I’m still using Normalize and Eric Meyer’s reset for improved cross-browser rendering. If you wish to remove this or use your own reset system, see Customizing Basic Grid at the bottom on how you can process your own customized version of this framework.

Getting Started

Beyond the standards of HTML like declaring doctype, you will need to set your viewport in order to make this work perfectly:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Grid Column Options

This grid system in its default form uses a 12-column grid with seven breakpoints for responsive design:

Breakpoint
Size Range
Ideal For
.col-xxs-
1px–319px
Small Smartphones
.col-xs-
320px–479px
Normal Smartphones
.col-sm-
480px–767px
Phablets and Landscape Orientation
.col-md-
768px–991px
Small Tablets
.col-lg-
992px–1199px
Large Tablets and Small Laptops
.col-xl-
1200px–1439px
Large Laptops and Workstation Monitors
.col-xxl-
1440px+
Large Screens

Setting up grids (or rows)

Unlike Version 1.0, there is no requirement to use any kind of a container div anymore. You can simply set up a 12-column grid using the .grid class or the .row class. I kept .row in this system for those who are used to Bootstrap, but either does the same.

<div class="grid">
···
</div>

<div class="row">
···
</div>

The classes for the grid areas are also significantly different now compared to Bootstrap or Version 1.0. Instead of using just a number to signify how many columns your grid area spans, you instead enter two numbers signifying the starting column and the ending column:

.col-[breakpoint]-[starting column]-[ending column]

Any undeclared divs within the grid will be set to span the full 12 columns. Here are a few examples to illustrate the system and syntax:

.col-xl-1-6 .col-md-1-4
.col-xl-7-12 .col-md-5-12
.col-lg-1-9 .col-xxs-1-6
.col-lg-10-12 .col-xxs-7-12
.col-md-1-4
.col-md-5-8
.col-md-9-12
.col-xl-1-1 .col-lg-1-3 .col-xxs-1-4
.col-xl-2-2 .col-lg-4-6 .col-xxs-5-8
.col-xl-3-3 .col-lg-7-9 .col-xxs-9-12
.col-xl-4-4 .col-lg-10-12 .col-xxs-1-4
.col-xl-5-5 .col-lg-1-3 .col-xxs-5-9
.col-xl-6-6 .col-lg-4-6 .col-xxs-9-12
.col-xl-7-7 .col-lg-7-9 .col-xxs-1-4
.col-xl-8-8 .col-lg-10-12 .col-xxs-5-8
.col-xl-9-9 .col-lg-1-3 .col-xxs-9-12
.col-xl-10-10 .col-lg-4-6 .col-xxs-1-4
.col-xl-11-11 .col-lg-7-9 .col-xxs-5-8
.col-xl-12-12 .col-lg-10-12 .col-xxs-9-12

Column Wrapping

Column wrapping can still happen within reason. While you cannot make the divs span a number of columns past the final column, you can see that divs will slide in and out of the first row if they can fit.

.col-lg-1-8 .col-md-1-5
.col-lg-1-6 .col-md-6-10
.col-lg-7-11

Changing Grid Item Heights

In the past, you would simply set a height to a div and manipulate things around it. Setting a height in this system will make all the divs in a row grow in the same height. Let me illustrate:

.leftDivTaller {
height: 8em;
}
.col-md-1-5 .leftDivTaller
.col-md-6-12

Now if you wanted to simply make the left grid area taller but keep the right its own height, try using .grid-row in your CSS:

.leftGridAreaTaller {
grid-row: 1 / 3;
}
.col-md-1-5 .leftGridAreaTaller

You need content in this cell to push the height.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque, est ac dictum aliquet, nisi velit cursus urna, eu dapibus velit odio quis lorem. Donec sit amet nisl vel sem dignissim varius eu ac leo. Donec sit amet leo eget risus iaculis accumsan. Sed eleifend egestas consectetur.
.col-md-6-12

No more Column Reset

Since CSS Grid does not use floats to place items, the idea of a clearfix to clear said floats within a row is gone. A simple solution would be to set up multiple rows or use the column classes, or even to explore using .grid-row in your CSS.

.col-lg-1-8 .col-md-1-12 .col-xxs-1-6
.col-lg-9-12 .col-md-1-6 .col-xxs-6-12
.col-lg-1-4 .col-md-1-6
.col-lg-5-8 .col-md-7-11
.col-lg-9-12 .col-md-1-4
.col-lg-1-4 .col-md-1-4
.col-lg-5-12 .col-md-5-8

Nested Columns

If you wish to nest columns within a column, you simply set up a new .grid or .row and go from there. The grid area you’re in will act as a container for the new row.

.col-lg-1-6 .col-md-1-9
.col-md-1-4
.col-md-5-8
.col-md-9-12
.col-lg-7-12 .col-md-10-12

Column Reordering

Since we are no longer using floats and margins to place items in a grid, the idea of having push and pull classes is redunant. Instead, just set up your placement using the column classes with the numbers as where you want things to place, but you'll also need to set your grid areas to be in one row using grid-row in the media queries. Here's the example from Version 1.0 redone in the new ideology:

@media (min-width: 768px) {
.keepItInOneRow {
grid-row: 1 / 1;
}
}
.col-lg-5-12 .col-md-1-8 .keepItInOneRow
.col-lg-1-4 .col-md-9-12 .keepItInOneRow

Column Offset

Offsetting is a simpler matter with CSS Grid, as you can just set your grid areas to place exactly in the columns you wish. Here is the example from Version 1.0 redone:

.col-lg-4-9 .col-md-3-10
.col-lg-1-2 .col-md-1-3
.col-lg-5-8 .col-md-5-8
.col-lg-11-12 .col-md-10-12
.col-lg-4-7 .col-md-3-7
.col-lg-10-12 .col-md-9-12

Column Visibility

Just like before, you can make grid areas appear and disappear at certain breakpoints by using .hidden- and .visible- classes alongside your grid column classes. Simply use .hidden- or .visible- with the breakpoint you wish.

NOTE:It seems when you want to hide a grid area on one breakpoint, you need to declare the .visible- class on the other remaining breakpoints you wish this area to appear. It’s a bug I also noticed with Bootstrap and am exploring a workaround.

Also bear in mind that columns will not shift to the left when you hide a div area because we’re designating exactly where they place.

.col-lg-1-3 .col-md-1-4 .col-sm-1-6
.col-lg-4-6 .col-md-9-12 .col-sm-7-12

Customizing Basic Grid

An additional benefit to this CSS framework is you can totally customize the number of breakpoints you want, the widths of those breakpoints, their names, the gutter, and the total number of columns you want.

I’ve included the SCSS files used to make the full grid. Simply open _config.scss and change the configuration as you see fit, then process it into finished CSS using a preprocessor such as Gulp or Koala.

Questions? Comments? Suggestions?

Please feel free to reach out!