A Practical Real-World Example with Full Browser Support Data

Image for post
Image for post

This article assumes you have already learnt CSS Grid and Flexbox but are now worried about using it in a real-world live project. Maybe you fear that users without support for Grid might just get a jumbled-up mess instead of your intended design? I know it was one my main fears!

I have read a fair few articles on this topic, but when it came to redesigning and coding my first live website with CSS Grid I still ran into some problems along the way. For this reason, I did a whole bunch of research and have documented what I…

An experiment using Flexbox & CSS Grid with HTML5 Sections

Image for post
Image for post

The CSS Grid

I have found CSS Grid to be a fantastic way to layout a website. It can make the design, as well as the development of the front-end a million times faster and easier. I am a big fan!

CSS Grid enables you to create a grid, then go on to position elements of the page within and/or over the grid. If you are familiar with graphic design grid layouts then you will already feel comfortable with this idea, so when starting to work with CSS Grid it all seems to make perfect sense.


Independent UI/UX Product Designer & Front-End Web Developer designing delightful User Experiences built with Jamstack technologies.

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