Coding

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

CSS Grid for page layout and Flexbox for UI elements

aliceyt
The Startup
Published in
6 min readOct 29, 2019

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.

Determine the number of rows

I’ll sort the elements into groups vertically. Elements along the same (imaginary) line will be considered in the same column.

Create a guide

After determining the number of columns and rows, I now have a guide that I can follow when coding. In it, I’ll also mark out the grid lines and note down the parent and child elements.

Step 2 — Create the HTML file

--

--

aliceyt
The Startup

Read to write and 📝 to 📖 | Articles organised by categories on https://github.com/tiffam/medium_articles