The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

To set an element to grid, first to set display property to grid, then set the size of the grid.

.container {
  display: grid;
  /* 3 x 2 */
  grid-template-rows: repeat(3, 100px);
  /* equal to "100px 100px 100px" */
  grid-template-columns: repeat(2, 100px);
  /* easier way to set rows and cols at a time */
  grid-template: repeat(3, 100px) / repeat(2, 100px);
  border: 3px solid grey;
}

Aligning items

Similar to flex The align-items property is used to align the items.

==Note: by default, they are set to stretch==

Move an item inside the container

• justify-items (along the horizontal axis) e.g. left, right, center.
• align-items (along the vertical axis)

Move the grid as a whole

• justify-content
• align-content

fr Unit

fr stands for fraction, which is another unit when it comes to creating grid.

By using fr , we are telling CSS to use a number of fraction of the available space in the container.

.container {
  display: grid;
  /* Row: 100px fixed 1st& 3rd row, 2nd will be resized when you change the browser size. */
  /* Col: 30% for 1st col, 70% for 2nd col */
  grid-template: 100px auto 100px / 30fr 70fr;
}

Gap

Gaps between each row and column

• row-gap
• column-gap