Home > frameworks > Understanding CSS Grid Systems from the Ground Up

Understanding CSS Grid Systems from the Ground Up

March 11Hits:1
Advertisement

Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying to garner favor.

If you’re the curious type, such as myself, than you may be asking yourself what exactly grid systems bring to the table? How do they work? And how might you go about creating your own? These are just some of the questions I will be trying to answer as I explore the various concepts at play while stitching together a basic grid system from the ground up.

What is a Grid System?

In case you’re new to CSS grid systems, we’ll start with a quick definition. In basic terms, a grid system is a structure that allows for content to be stacked both vertically and horizontally in a consistent and easily manageable fashion. Additionally, grid system code is project-agnostic giving it a high degree of portability so that it may be adopted on new projects.

The Benefits

  • They increase productivity by providing simple and predictable layout scaffolding to HTML design. The structure of a page can be formulated quickly without second guessing its precision or cross-browser compatibility.
  • They are versatile in how layouts can be constructed, being adaptable in varying combinations of rows and columns. They even support nested grids for more complex use cases. No matter your layout requirements, a grid system is almost certainly well suited.
  • They are ideal for responsive layouts. This is where grid systems reign supreme. They make it incredibly easy to create mobile friendly interfaces that are adaptable to different sized viewports.

The Primary Components

Grid systems include two key components: rows and columns. Rows are used to accommodate the columns. Columns make up the final structure and contain the actual content. Some grid systems will additionally include containers, which serve as wrappers for the layout.

Resetting the Box Model

First and foremost, it is important for any grid system to reset the box model. By default, the browser does not include the padding and border within the declared width and height of an element. This does not bode well for responsiveness. Thankfully, this can be fixed by setting the box-sizing property to border-box for both rows and columns:

.row,   .column {      box-sizing: border-box;  }

Now we can leverage percentages for the widths of the columns. This allows the columns to scale upwards and downwards within different viewports while maintaining the structure.

Clearing Floats

In order to align the columns horizontally, grid systems will float the columns. This means you need to clear the floating elements on the row to maintain the structure of the layout. This is where a clearfix comes in:

.row:before,  .row:after {      content: " ";      display: table;  }    .row:after {      clear: both;  }

By applying the clearfix to the row in your CSS, it will cause the row to stretch to accommodate the columns it contains without adding to the markup.

Defining Columns

For columns, the styles need to be defined in 2 parts: the common styles and the widths. First the common:

.column {      position: relative;      float: left;  }

Here, the column is given a relative position to allow any absolutely position content within the column to be positioned relative to that column. The column is then floated left for horizontal alignment, which will cause the element to become display: block even if it did not start out that way.

Creating Gutters

Gutters help to create separation between columns for greater legibility and aesthetics. There are 2 schools of thought when approaching gutters; defining paddings within each column or using a percentage-based left margin for each column.

I prefer the latter approach because it facilitates responsive gutters that will remain relative to the columns and the viewport as a whole with different screen sizes. It also lets you define additional paddings for columns for further flexibility. The biggest advantage of padding-based gutters is in how they simplify calculations for column widths, which will become evident in the next section.

Using the percentage-based margin approach, we can target columns that are an adjacent sibling to a preceding column. This will create a left margin for every column except the first one, which we’ll define at 1.6% using the margin-left property:

.column + .column {      margin-left: 1.6%;  }

Calculating Column Widths

Before we can begin making calculations, we need to determine the maximum amount of columns per row. A popular choice is 12 as it boasts flexibility given that it is divisible by 1, 2, 3, 4, and 6. This permits a variety of different combinations that still allow for evenly distributed columns of the same size.

It’s important to understand that by going with a maximum of 12 columns per row, you need to fulfill that amount for every row regardless of how many columns you want. For example, if you wanted only a row of 3 equal columns, you would use 3 elements that each span 4 columns (4×3=12). Exceeding the sum of 12 will result in the extra column(s) wrapping to a new line.

Now that we know the maximum number of columns, next we need to determine the width of a single (1/12) column using the following formula:

scw = (100 – (m * (mc – 1))) / mc

Where:

  • scw = single column width
  • m = margin (1.6%)
  • mc = maximum columns (12)

When we plug in the numbers, we get a single column width of 6.86666666667%. From here we can use this number to calculate the rest of the column widths. The formula for this is:

cw = (scw * cs) + (m * (cs – 1))

Where:

  • cw = column width
  • scw = single column width (6.86666666667%)
  • cs = column span (1-12)
  • m = margin (1.6%)

Applying this formula for each of the 12 columns results in the following CSS.

.column-1 {      width: 6.86666666667%;  }    .column-2 {      width: 15.3333333333%;  }    .column-3 {      width: 23.8%;  }    .column-4 {      width: 32.2666666667%;  }    .column-5 {      width: 40.7333333333%;  }    .column-6 {      width: 49.2%;  }    .column-7 {      width: 57.6666666667%;  }    .column-8 {      width: 66.1333333333%;  }    .column-9 {      width: 74.6%;  }    .column-10 {      width: 83.0666666667%;  }    .column-11 {      width: 91.5333333333%;  }    .column-12 {      width: 100%;  }

Optimizing for Mobile Devices

Despite the fact that the grid system is responsive, it can only go so far. For devices with small viewports, such as smartphones, the width of the columns need to be adjusted to allow the content they contain to still appear legible and visually appealing. Media queries help with this:

@media only screen and (max-width: 550px) {      .column-1,       .column-2,       .column-3,       .column-4,       .column-5,       .column-6,       .column-7,       .column-8,       .column-9,       .column-10,       .column-11,       .column-12 {          width: auto;          float: none;      }        .column + .column {          margin-left: 0;      }  }

Here, we are telling the grid to allow every column to take up the full width of its container for devices with a viewport smaller than 550px pixels wide. Since gutters are no longer necessary here, we remove those too.

Alternatively, you could opt for a mobile first strategy that takes the opposite approach, scaling upwards to a 12-column layout. In such a case, columns start as full-width, then we establish the column widths and floats to allow them to align horizontally as the screen resolution reaches a specified threshold. This is the preferred approach for Bootstrap’s grid system, which doesn’t institute the column widths until the viewport reaches a minimum width of 992 pixels. This may be a more favorable approach for your use case, and should be something to look out for when evaluating a grid system.

Pulling it all Together

When we combine all the concepts and CSS, we can write HTML layout scaffolding like so:

<div class="row">      <div class="column column-4"></div>      <div class="column column-4"></div>      <div class="column column-4"></div>  </div>    <div class="row">      <div class="column column-2"></div>      <div class="column column-4"></div>      <div class="column column-4"></div>      <div class="column column-2"></div>  </div>

Check out the CodePen demo below to see the entire grid system in action, including nested grids:

See the Pen Understanding CSS Grid Systems by SitePoint (@SitePoint) on CodePen.

You can also try the full screen demo for a better impression. Don’t forget to play around with the screen dimensions to see how the grid handles different viewports.

Conclusion

As you can see, it doesn’t take much to put together a basic grid system. The math is probably the most complex part. Despite its simplicity, the grid continues to be a powerful and flexible tool for layout scaffolding. With the various concepts I’ve discussed here, hopefully you have a better understanding of how grid systems work. This should help you evaluate different grid systems moving forward, and choose the right one for your next project, or even create your own.

Tags:css grid

Related Articles

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • Should I use a CSS grid system for this template?

    Should I use a CSS grid system for this template? February 13

    This might be the wrong place to ask but... I want to convert the following template to HTML and CSS. Should I use a grid system such as bootstrap or skeleton? Seeing as it's already a grid it seems to make sense. I get the feeling that bootstrap wou

  • Blocks and CSS Grid Systems

    Blocks and CSS Grid SystemsSeptember 12

    How do I achieve the following in Drupal: <div class="row"> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4 col-md-4">[MY BLOCK HERE]</div> <div class="col-xs-4

  • Simple grid system made out of CSS columnsApril 15

    I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside. Below is what I have created, what are your opinio

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • Easy Responsive CSS Grid Layouts: 4 MethodsJune 11

    These days, there's a framework for everything, and it seems that before we can even digest one, another one is released. This holds particularly true when it comes to CSS grid layouts, and there's no shortage of frameworks deemed "the best, most lig

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • How to create a grid system on a tri fold leaflet or brochure in InDesign

    How to create a grid system on a tri fold leaflet or brochure in InDesignSeptember 11

    I'm new to working with grids and tri folds, and I was wondering if anyone could help me out? As you well know when creating a tri fold, the fold in panel width becomes a different size than the other two panels. And from some templates I've download

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • Custom bootstrap like grid system with HTML and CSS February 7

    How to implement Custom bootstrap like grid system with HTML and CSS? Or how does bootstrap internally implement grid system ? --------------Solutions------------- As Won Jun Bae suggested, the best way to learn it to check out Bootstrap CSS files. H

  • Anyone using 960 Grid System or YUI 2 Grids CSSApril 13

    Anyone having experience with 960 Grid system and getting it to play nicely with SharePoint? I am intrested in experience from other CSS Framework and how successfull was your team in implementing this? --------------Solutions------------- I'm using

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Help to understand css files with Omega themeJuly 19

    I don't fully understand the css files with omega theme. In sites/all/themes/omega_subtheme_2/css I have these files (among other): omega-subtheme-2-alpha-default-narrow.css omega-subtheme-2-alpha-default-normal.css omega-subtheme-2-alpha-default-wid

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • Ionic grid system 3x3 not applying

    Ionic grid system 3x3 not applyingFebruary 2

    I am trying to create this with the grid system of Ionic My html code: <ion-content> <div class="row responsive-md" > <div class="col col-33"> <div> <a ng-repeat="gin in gins" href="#">

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • What are "rows" in a responsive grid system?

    What are "rows" in a responsive grid system?January 22

    I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ? Say I want the following design on a large screen

  • Using CSS Grid Layout and Blend 5 to Build a Game

    Using CSS Grid Layout and Blend 5 to Build a GameApril 16

    I'd like to share with you a mysterious internal secret kept within Microsoft for a long time. It's the real story behind the concept of the CSS Grid Layout imagined by Microsoft for IE10 and Windows Store Apps. Most of you probably think that this s

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.659 s.