A quick primer on css grids

grids.md

A handy of using css grids:

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px;
}

// Alternatively
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  // or using fraction units
  // grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 50px);
  grid-gap: 3px;
}

// Using grid shorthand
.grid-container {
  display: grid;
  // row then column
  grid-template: repeat(2, 50px) / repeat(3, 1fr);
  grid-template: repeat
}

Here's an alternative way of displaying the content using gfid-area:

.grid-container {
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(12, 1fr);
  grid- template-rows: 40px auto 40px;
  // use dots for blank areas
  grid-template-areas:
    "h h h h h h h h h h h h"
    "m c c c c c c c c c c c"
    "f f f f f f f f f f f f";    
}

.header {
  grid-area; h;
};

.menu {
  grid-area: m;
};

.footer {
  grid-area: f;
};

Here's how you use autofit and minmax:

.container {
  display: grid;
  grid-template-columns: repeat(auto, minmax(100px, 1fr);
  grid-auto-row: 100px;
}