Playing With Css Grid

Css Grid feature is here for already long time, but until now i had no chance to experiment with it.
And i believe that one cannot claim he understand something to do with programming until he wrote some code.
So this time i will use codepen editor as playground for my experiments.

Css Grid - Get Started

First of all the grid must have a container - the wrapper element which CSS has display property set to "grid"

display: grid

All direct child elements inside container are called grid items

Layout

For practicing - lets start with building simple layout with header content and footer.

 Note: the "content" section must catch all free space between header and footer (which is little tricky)

For implement this layout lets set following HTML structure You may say it is too simple, but when you starting - i believe you have to be simple as possible (stupid simple)

<div class="container">
  <div class="header">header</div>
  <main>main</main>
  <div class="footer">footer</div>
</div

To make the "main" part catch all available space between header and footer - i will use grid-auto-rows feature

  grid-auto-rows: 60px auto 60px;

Thas it , see the codepen here: