Building Our Own Column Grid System

Before we start building our own column layout system, we need to understand what exactly we are trying to build.

So, let’s spell out the requirements:

• Our column grid should have 12 columns.
• We need a defined grouping container for the column grid, which will span the full width of the parent HTML element.
• We should be able to nest column grid containers so that a container can be placed inside another container’s six-column CSS class, for example.
• Our column grid needs to be as versatile as possible; can we make it at least somewhat responsive?

We’ll stick to the very basic functionality to understand how grids work.

Building 12 columns

Here’s the HTML, CSS, and the corresponding output: