A step by step tutorial on creating a responsive CSS grid layout with fallback for older browsers.
We have an updated version of this tutorial available. Please use it instead of this tutorial.
In this tutorial, we’ll create a CSS grid-based page from scratch.
What you’ll need
- A copy of Pinegrow, a trial version will do.
- Download the tutorial project. It contains two pages, start.html with just the content and finished.html with the finished project. content.txt includes the content and the snippet that is used for the fallback detection in part 10.
Part 1 – Creating the page and the content
We’ll create a new page and paste in the content.
Part 2 – Creating the CSS grid
Use the CSS Grid editor to create the grid on the body element.
Part 3 – Placing the elements
Moving and resizing the elements to put them where they belong.
Part 4 – Dropping elements in the grid
Dropping a quote straight into a grid and adjusting the layout.
Part 5 – Named areas
Using named areas for better positioning.
Part 6 – Named tracks
We can use named tracks to place the elements that overlap with other grid areas.
Part 7 – The Logo and the menu
Adding the logo and the navigation menu to the page.
Part 8 – Improving the design
We’ll spend some time making the page look better and adjusting the layout.
Part 9 – Making the page responsive
Create three different grid layouts for small, medium and large devices.
Part 10 – Fallback for browsers without CSS grid
We’ll use the ability to switch off the CSS grid support for a page view to help us with creating the alternative layout for older browsers. The code snippet can be found in content.txt in the tutorial project.