OK for part 2 lets begin by making a mini web site on this page. It won't have any working links. We'd have to use an iframe for that but we're only concerned with layout.

So we'll start with a blank canvas, inside of which I'll put a container div and inside that the 9 divs that will comprise the grid.

I've added a bit of a gap here, grid-gap: 2px, just to make visible what's going on with the 9 boxes.

I've also given each box an invidual id so it can be targetted specifically later.

Looking at this we can see box number 5 is the one for main content so I'll add some to it next and change the colors too:

Now the site has a bit of shape we can try to add the main menu. That should should run along box 1 and box 2.

If I delete box 2 and expand box 1's width to 80% ... let's see what happens...

Oh dear. That wasn't what we wanted. The first box has stubbonly refused to expand out of it's grid whilst the other boxes have just flowed backwards one place to fill the void left by box 2. If you scroll down you'll see the place where the last box was, box 9, is now empty. So what should be done? This is obviously not right.

The secret ingredient needed is another of those 18 grid container properties: grid-column-end: span 2.

Take note...

A few extra points on the above.

1. Rather than use percentages for the column widths it's better to use a new unit: fractions. These use fr. So instead of using grid-template-columns: 15% 65% 20% you use 3fr 13fr 4fr.
2. If you have a number of repeating column the same size you can use the repeat command: grid-template-columns: repeat(10 1fr). This will give you 10 equally sized columns.
3. To set the height of the boxes: grid-auto-rows: 120px.
4. The above will mean that any excess text will come flowing out of the bottom in a mess. To avoid this use the minmax function: grid-auto-rows: minmax(120px, auto). The boxes will then be set at their minimum height of 120px but expand to any height for their max values.

So with that here endeth the second lesson. Lots more to learn about grids. This stuff barely scratches the surface.

.minisite {
  width: 50%;
  height: 350px;
  overflow: scroll;
  background: var(--body-bg);
  margin-bottom: 5em;
}

.minisite > .content {
  display: grid;
  grid-template-columns: 15% 65% 20%;
  grid-gap: 2px;
  width: 80%;
  margin: 0 auto;
  background: var(--container-bg);
  font-size: 0.25em;
  line-height: 1.2;
}

.minisite h1 {
  font-size: 40px;
}

.minisite > .content > div {
  background: tomato;
  padding: 1em;
}

.ms1 #gb5 {
  background: var(--container-bg);
}

.ms2 .mainmenu {
  display: flex;
  justify-content: flex-start;
  list-style-type: none;
  color: var(--container-bg);
}
.ms2 .mainmenu li {
  padding: 1em;
}
.ms3 #gb1 {
  grid-column-end: span 2;
}