How I use CSS Grid and Flexbox to Create a One-page Website
Tags: UI, Programming, Front End Development, Web Development, CSS

Step 3 — Create CSS file

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

Set-up

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

Create the grid

C SS 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 .

Since and contains only the content, and I want and to expand to cover the remainder of the page while pushing to the end of the page, I add . 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;

Below is the end result from using CSS Grid:

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.

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?

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.

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.