Some people learn better by starting from a theme and customizing it. Personally, I learn better if I learn the basics and expand from there. If you are struggling with CSS Grid, I highly encourage you to watch the 3 videos that Bob "The Builder" made.

https://cssgrid.cc/video-tutorials/

The videos will do two things for you.
1. You'll learn how CSS Grid is put together.
This may help you gain a better understanding of how Grid works.

2. You'll learn about Fallback First.
You may not realize this, but for Q1 2018, IE11 is 2nd in use behind Chrome with almost 12% of the market -- more than Firefox, Safari and Edge. ( See: https://tinyurl.com/ybk77t3m ) There are a number of reasons for this, but a big one is that larger companies are finally upgrading to Win10, but they are installing IE11 as well so that they can use it instead of MS Edge. The problem is that IE11 does not recognize CSS Grid, and it should not be ignored with that much market share right now. That's what "Fallback First" is for. It allows you to create what IE11 (and other older browsers) will display.

Back to the discussion about the videos.

Video 1: Introduces you to CSS Grid and setting it up
Video 2: Sizing grid rows, columns and gutter
Video 3: Put it all together by creating the "Holy Grail Layout"

If you watch for what Bob is actually doing in the RSD settings, you'll not only learn how Grid works and how to put together a basic layout, you will learn how to use the Grid Editor which is an awesome feature IMO.

For those who like to start with a theme, I've attached a SD3 file that already has a "holy grail layout" and also contains a basic dropdown navigation menu.

NOTE: I wasn't the original creator of the dropdown menu. I created it from another forum member's drop-down, but I tweaked it a little. (I can't remember who it was that posted it originally.)

Could be my base template for some things. Thank you, Brian...

Yes, well done Brian. I have saved the layout as a component which I saved in a folder I created in components called "Layouts"

A layout component, nice!

Sorry to hijack the post. I am trying to recreate Bob's video 1. What does he use to create the blue boxes lettered a-h? Are they containers or images? Thanks Phil
P.s great work Brian.

They are containers with a heading inside them.

That's what I did you recreate but came up unstuck. The containers all had gaps around but no padding or margins. Will have another go me thinks?

Watch closely the styles panel in the video and pause it to copy Bob's settings. That might help.

So Brian are they containers inside one container ??? I am too trying to recreate Bob's video 1 to learn but as soon as i got to the part he said he cheated and already created a component it was all over red rover .. LOL until i have found a way to make that component