How to Create a Website Using CSS Grid

CSS Grid is a very powerful tool for rendering web layouts. Prior to CSS Grid, we used tables to create website layouts, then we progressed to Flexbox and then CSS Grid. Like tables and Flex-box, CSS Grid allows us to align items in rows and columns. However, designing complex web layouts is now made possible with CSS Grid. Unlike tables, CSS Grid makes it easy to create web pages without having to use “floats” and “positioning”. In this tutorial, I will take you through the steps I took building the landing page of this sample website. Upon reading through this tutorial, I am confident that you will able to build the remaining pages of the website, feel free to experiment, use whatever layouts you feel most comfortable with. I would love to see your awesome designs if you will share it to me on Twitter. Let’s go!!!

Web Page Layout

My web page was structured this way. In my “head” tag, my external CSS was linked as seen below:

My “body” tag was further divided into sections. The example below is my “nav” tag with my¬† “navigation bar” showing four other pages. See snippet below:

After my nav bar, there is another section with class name “top-container”.

Following the top-container is another section with class name “boxes”.

And then the last two sections: “info” and “portfolio”.

Finally, the “footer”.

My CSS Styling

I created variables to help me hold down colors that I used throughout my web page, and then the “box-sizing” to remove all default “width” and “height” properties in my HTML.

The code snippet above is the styling applied to my navigation bar, see how I activated the “grid” with this lines of code below:

By simply setting the wrapper class to “display: grid”, it activates the grid system, and “grid-gap: 20px;” sets the space between the columns and rows.

In the snippet above, gave a minimum “height”, and a “background” image for my “header” and applied other styling as seen above.

The “.boxes class” was set to grid by displaying it to “grid”, then a “grid-gap” between the boxes was set to 20px.

The “repeat()” function allows me to repeat columns as much as needed, “minmax” width of 200px for each boxes, the 1fr tells the browser to distribute the space between the columns so that each column equally gets one fraction of that space. That is, they’re all fluid, equal-width columns. The auto-fit tells the browser to handle column sizing and element wrapping so that the elements will wrap into rows when the width is not large enough to fit them in without any overflow.

Notice how I am using the CSS variables and box shadow initially declared from the start in my CSS file.

And finally, the media query applied will enable the element stack on top of each other when viewed on smaller screens otherwise they turn out being squished and not responsive.

Output

Conclusion

I hope you have learnt something on CSS Grid on reading this tutorial. Here is a more in depth tutorial on CSS Grid. As a suggested assignment, why not try building the other pages of this website? Tweak this current design, make it more beautiful and responsive. I would love to see your lovely designs if you don’t mind sharing with me on Twitter. Keep learning!!!

Related Posts