Coding

How I use CSS Grid and Flexbox to Create a One-page Website

CSS Grid for page layout and Flexbox for UI elements

While we can use either CSS Grid and Flexbox for a webpage layout, CSS Grid tends to be used for page layouts while Flexbox tends to be used for aligning UI elements. Let’s create a webpage to see how this pans out in real code. I’ll be using a common design as below:

Step 1 — Plan before coding

The trick to coding layouts is to plan beforehand.

I’ll identify the parent and child elements first based on the layout method. Below are my workings based on the design.

Determine number of rows

I’ll sort the elements on the page into groups horizontally. Elements are represented as boxes, and those along the same (imaginary) line are considered to be in the same row e.g. aside and article. Were they to start or end on a different line, I would consider them to be on different rows.

Do note that the three elements and its container within article are ignored here as they are not part of the grid.