CSS Grid is a fundamentally new approach to building layouts using CSS.
CSS Grid and Flexbox are not competing technologies. CSS Grid works on 2 dimensions (rows AND columns) while Flexbox works on a single dimension (rows OR columns).
Here's a list of all the properties available in CSS Grid.
What I'm doing differently in my example is that I'm naming my grid lines.
Naming lines is useful when creating a responsive design where you redefine the grid, rather than then needing to redefine the content position by changing the line number in your media queries, you can ensure that the line is always named the same in your definitions.
Have a look at the mozilla developer docs for me details on this.
This will be the very simple desktop layout
And when the viewport gets smaller the sidebar moves to the top and the boxes will collaps.
The html is very basic, we have a header, sidebar, main then another container with content and lastly the footer.
The CSS is where it all happens.