Understanding CSS Grid Systems from the Ground Up

Share this article

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:

.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: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


  • 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))


  • 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-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 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>

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.


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.

Frequently Asked Questions about Understanding CSS Grid Systems

What is the CSS Grid System and why is it important?

The CSS Grid System is a two-dimensional layout system that has features to control rows and columns in web design. It is a powerful tool that allows developers to create complex layouts with ease. The importance of the CSS Grid System lies in its flexibility and control. It allows for the creation of responsive designs that adapt to different screen sizes, making it an essential tool in modern web development.

How does the CSS Grid System differ from other layout methods?

Unlike other layout methods such as Flexbox or Floats, the CSS Grid System allows for layout designs in both rows and columns simultaneously. This means you can control the width and height of elements, and their position in relation to each other, providing a level of control that is not possible with other methods.

Can I use CSS Grid System with Bootstrap?

Yes, you can use the CSS Grid System with Bootstrap. Bootstrap 4 includes a built-in grid system that is based on Flexbox, but you can also use the CSS Grid System for more complex layouts. It’s important to note that using both may require careful planning to avoid conflicts.

What are the basic components of a CSS Grid System?

The basic components of a CSS Grid System are the grid container and the grid items. The grid container is the parent element that holds the grid, while the grid items are the children elements that are placed within the grid.

How do I create a grid in CSS?

To create a grid in CSS, you first need to set the display property of the parent element to grid or inline-grid. Then, you can use the grid-template-columns and grid-template-rows properties to define the structure of your grid.

What are grid lines in CSS Grid System?

Grid lines are the dividing lines that make up the structure of a CSS grid. They can be horizontal or vertical and are numbered starting from 1. You can position grid items between any two lines of the grid.

How can I make my CSS Grid responsive?

To make a CSS Grid responsive, you can use media queries in combination with the grid-template-columns and grid-template-rows properties. By changing the grid structure at different viewport sizes, you can create a layout that adapts to different screen sizes.

What is the fr unit in CSS Grid System?

The fr unit in CSS Grid System stands for fraction. It represents a fraction of the available space in the grid container. For example, if you have two columns each with a width of 1fr, they will each take up half of the available space.

Can I nest grids in CSS Grid System?

Yes, you can nest grids in the CSS Grid System. This means you can have a grid item also become a grid container, allowing for more complex layouts.

Is CSS Grid System supported by all browsers?

As of today, CSS Grid System is supported by all modern browsers, including Chrome, Firefox, Safari, and Edge. However, it is not supported by Internet Explorer. It’s always a good practice to check the current browser support for CSS Grid System before using it in your projects.

Ryan MorrRyan Morr
View Author

Web developer based in Barrie, Ontario, Canada with a real passion for everything front-end, especially JavaScript. I am a very proud Canadian, and yes, I love hockey, the stereotype is true! I blog about front-end web development at ryanmorr.com.

AdvancedCSScss gridgrid systemLouisL
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form