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

CSS Grid for page layout and Flexbox for UI elements

Oct 29, 2019 · 6 min read

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:

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post

Step 2 — Create the HTML file

For a simple layout, I’ll type out all the html before I work on the CSS.

Image for post
Image for post

Step 3 — Create CSS file

After which, I’ll create the CSS file and link it to my html file.


I remove the default margin and padding of html and body elements, and add a height of 100%.

Create the grid

CSS Grid can be intimidating at first as there are a number of ways to create a grid. Hence, it is less confusing to keep to one particular syntax when learning.

I declare display: grid on the div with the class of grid-wrapper. This transforms the div to a grid-container. Its direct children are now grid-items. Elements that are within its direct children will remain unaffected.

Next, I specify the width of grid rows and the height of grid columns.

  • Rows: Since header and footer contains only the content, and I want aside and article to expand to cover the remainder of the page while pushing footer to the end of the page, I add grid-template-rows: min-content auto min-content.
  • Columns: As I want aside to take up 1/4 of the page width and article to take up the remainder, I use grid-template-columns: 1fr 3fr. The fr unit represents a fraction of the available space in the grid container. As for header and footer, I don’t have to think about them since they spread across the two columns, taking up a width of 4fr.

Slot elements into grid cells

I specify each grid-item’s size and location position using the shorthand grid-column and grid-row properties.

Header and footer will cover the area of 2 columns. The longhand of grid-column: 1/3 is:

grid-column-start: 1;
grid-column-end: 3;

It just means that it starts on the first vertical line, and ends on the third vertical line.

Likewise, aside’s declaration of grid-row: 2/3 means that it starts on the second horizontal line, and ends on the third horizontal line.

grid-row-start: 2;
grid-row-end: 3;
Image for post
Image for post

Below is the end result from using CSS Grid:

Image for post
Image for post

Creating flex-container and flex-child

Next, I work on spacing out the image elements, which are shown as gray boxes.

The div with the class of flex-wrapper is wrapped around my images. To transform it into a flex-container, I add display: flex. There is no need to change the direction of the flex-items as they will be laid out from left to right by default.

To improve on the responsiveness of the page, I want my flex-items’ width to adjust according to the page width. This can be achieved by setting flex-grow: 1 on all three images.

Image for post
Image for post

Mobile view

Lastly, I work on the mobile view.

In mobile, we tend to lay things out downwards rather than sideways as the screen size is limited. To achieve this, I can do this in a step:

Add a media query to apply display: block on my grid-container when the screen size is small. That’s a pretty neat way right?

Image for post
Image for post

The flex-items inside of article need more work as they are still laid out in a row. To change from row to column, I add flex-direction: column to the flex-container.

For styling purpose, I also add a margin-bottom: 20px to each flex-item to create a gap between the images.

Image for post
Image for post

With that, I have completed my webpage!

As always, the last step will be to check if there is any alignment issues at different breakpoints by changing the width of the browser.

Image for post
Image for post


To recap, the layout properties we’ve used in this article are:


  • display: grid
  • grid-template-columns and grid-template-rows (note the plural form)
  • grid-column and grid-row (note the singular form)


  • display: flex
  • flex-direction
  • flex-grow

Refer to Resources to learn more.


I edited the CSS in my CodePen after two feedback from two readers. Thank you both!

- at lines 68 to 79 to swop the order of aside and article on mobile view.

- at line 18 to change height of 100% to auto. This will prevent the layout from breaking when the content in grid-wrapper overflows.

I also published Part 2 of this article where I modified the template to create an actual site. Have a read if you are interested!

The Startup

Medium's largest active publication, followed by +754K people. Follow to join our community.


Written by


Read to write and 📝 to 📖 | Articles organised by categories on

The Startup

Medium's largest active publication, followed by +754K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store