CSS Grid

Grid

Author: James Dansie

Grid is another approach to css layouts. Unlike float and flexbox which allow their elements to move around, grid starts with a parent element/container, and then chops it into rows and columns. For the child elements, you declare which rows and columns it will go into.

Let's imagine you have a 2x3 grid of elements. You can start by declaring the parent as the 2x3 grid. Then you can tell your div to only take the bottom right. This leaves the rest of the site to be asides, and the top row to be a header. This site is fantastic for explaining this https://tympanus.net/codrops/css_reference/grid/.