parlicoot logo

parlicoot

Starting A CSS Grid

Its All Boxes, as far as the eye can see...


Why Use A Grid

The vast majority of websites out there use a grid. They may not explicitly have a grid system in place, but if they have a "main content area" floated to the left a "sidebar" floated to the right, it's a simple grid.

If a more complex layout presents itself, people often reach for a grid framework. They assume grids are these super difficult things best left to super CSS nerds. That idea is perpetuated by the fact that a lot of the grid systems they reach for are very complicated.

Don’t Overthink It Grids - CSS Tricks

A grid should be looked upon as a simple system for laying out more complex pages on larger computer screens.

Taking a mobile first approach, the page structure is nearly always a linear column of page elements set out in a hierarchical order from top to bottom. It is only when we come to thinking about a larger screen do we consider introducing a more complex layout.

A major problem with most frameworks is their inclusion of large complex grid systems when most sites require a more straightforward layout.

Simple Is Best

Grids are set out within a container or wrapper. This enables a set width to be given to the content inside the grid without having to worry about each item inside when looking to make everything responsive.

Think of the container as a box in which the grid is going to fit. We centre the box and set a maximum size. Your CSS will look something like:

.box {
    margin: 0 auto;
    max-width: 48rem;
    width: 90%;
}

The html is even simpler:

<div class="box">
    <!-- The Grid Goes Here -->
</div>

.box container

Inside the .box

The grid starts off as a series of .blocks, all 100% width held inside the .box. In our example there are 5 such .blocks.

.blocks within a grid

HTML:

<div class="box">
    <div class="block">
        <!-- Block 1 Content Goes Here -->
    </div>
    <div class="block">
        <!-- Block 2 Content Goes Here -->
    </div>
    <div class="block">
        <!-- Block 3 Content Goes Here -->
    </div>
    <div class="block">
        <!-- Block 4 Content Goes Here -->
    </div>
    <div class="block">
        <!-- Block 5 Content Goes Here -->
    </div>
</div>

« CSS Development Preparation | Home | Test files »