Summer Nights CSS Grid Tutorial

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.