I really enjoyed my little project of translating a Graphic Design Grid into a Web page using CSS Grid, but the idea of building a standard website with CSS Grid was still tripping me up. So I went ahead and built something basic and standard with CSS Grid. My original grid's template row height was set in pixels and adjusting heights for responsiveness is even too crazy for me, so I set my template rows as such:

 
    grid-template-rows: repeat(12, minmax(0px, max-content));

Now I have a grid that is responsive ready. The above style sets my grid to 12 flexible rows that will shrink down to 0px if there were no content.

For me, building a standard site should start mobile and work back to desktop. But because I'm slightly mad, I built the desktop version first. In my head I was thinking "I just wanted to layout a header, sidebar, cover image, main area, and footer and see it all fit together." This later bit me in the butt. I am obsessive about building mobile first with "min-width" media queries (quite mad, since I started backwards). It's no shock that when I started shifting things around for responsiveness, I found CSS Grid to be clunky (or rather I blamed CSS Grid), BUT and this is a big BUT, I started my design as a desktop design, so working backwards from there using min-width media queries will always be more work (I am admitting I shouldn't blame CSS Grid for the extra work as it was poor planning on my part). When I "respons-ified" my Graphic Design Grid, which was also built for desktop first, I used max-width media queries and it was incredibly less work.

1.

If you are building with CSS Grid decide whether you are building for a mobile or desktop screen first...

if desktop then use max-width media queries
else use min-width.

2.

Display flex inside your Grid.

Laying out the ancestor elements of my Grid was infinitely easier when I set it's child elements to "display:flex;" I tried creating a sub-grid at first, and that will take more study to be sure. For a simple design, I found that minimal effort was required when I set, for instance, the header element to:

display:flex; 
flex-flow:row nowrap; 
align-items:flex-end; 

The header element is the child of the .container which is set to display:grid; And so the header has the Grid Child Properties set to it like grid-columns and grid-rows. But the header's display property can be set to flex so that the header's children take on the flex alignment properties.

After I made the design responsive I started making it less standard and added my funky little touches. I don't like hearing things like "nobody uses box shadows anymore" and "nobody does rounded corners." Well, whatever, I did and I think it looks fun, sue me (no don't really I'm broke and I got mouths to feed). At any rate I added my little responsive touches, the box shadow moves on hover over the elements meant to link somewhere, they also have a "ripple effect" I learned from Ben Szabo

3.

CSS Grid can give you better control of your JavaScript Scroll Events.

Lastly, I added some JavaScript since I'm also in the process of honing those skills. JavaScript may be easier to predict when using CSS Grid with scroll effects since a lot of the object properties will be effected by "positioned elements" meaning, if you are using a lot of elements with position relative, absolute, sticky, etc. , then your scroll effects are going to get very hard to predict. With CSS Grid you don't have to use positioning very much. I only have two elements with positioning properties added to them, my logo has position:absolute; and my .content-main has position:relative; so that my scroll functions work the way I expect them to.

RESULT