CSS Grid

Submitted by admin on Tue, 03/31/2020 - 16:41

CSS Grid is a grid system that allows you to fill the grid with contents or assign content to a certain cell.

Some great resources:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid
https://css-tricks.com/snippets/css/complete-guide-grid/

When setting up a basic layout we can take a basic html and layout the area by their area name. When adding media lines we can go change rows, columns, template-areas and most important the order of the div blocks!

<div id="page">
  <div id="header">1</div>
  <div id="menu">2</div>
  <div id="sidebar">3</div>
  <div id="content">4</div>
  <div id="footer">5</div>
</div>

This is the css that goes with it:

div#page {
    display: grid;
    height: 100vh;
    grid-template-columns: 128px auto;
    grid-template-rows:  128px 2rem auto 100px;
    grid-gap: 6px;
    grid-template-areas: 
        "header header" 
        "menu menu"
        "sidebar content" 
        "footer footer";
        
    div#header { grid-area: header; }
    div#menu { grid-area: menu; }
    div#sidebar { grid-area: sidebar; }
    div#content { grid-area: content; }
    div#footer { grid-area: footer; }
    div {
        background-color: green;
    }
}

Important terminology:

  • grid container: the block containing the grid.
  • cell: a single cell in the grid.
  • grid item: one or more cells that form a rectangle.
  • area: a grid item that has a name.
  • row: a row of cells (from left to right).
  • column: a column of cells (from top to bottom).
  • line: a numbered line positioned before/between/after the rows/columns. The horizontal line 2 will be under the first row.
  • track: a row or column.
  • grid gap: the space between rows or columns.

Tags