CSS Grid: The ultimate layout tool

Ultimate layout tool

• Grid enables us to created grids.
• We can work on 2-dimension, vertical & horizontal axis at the same time.
• Opens up new layout possibilities which we didn’t had.

Setting up a grid

display: grid;

• Margins no longer collapse

Template rows and columns

grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// shorthand
grid-template: 50px 200px / 200px 200px 350px;

Placing items on the grid

// Used on grid container
grid-template-columns: 200px 200px 350px; // set the width
grid-template-rows: 50px 200px; // set the height

// Used on grid item
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;

// shorthand
grid-row: 1 / 3;
grid-column: 2 / 3;

// end line is -1
grid-column: 1 / -1; // start to the end

• Overlaying items are easy.

Spanning

grid-column: span 2; // from line 1 to 3
grid-column: 2 / span 2; //from line 2 to 4

Similarities to flexbox

1. auto

   When defining our rows, we mostly don’t want to set an exact height, we want it to match the content.
   

   grid-template-row: 50px auto;
   

   Height is fixed to the largest item’s height. Every items are stetched as default.

   If we don’t declare grid-template-row , it becomes auto.

2. align-items & justify-items

   • justify-items: align each items horizontally
   • align-items: align items vertically

   justify-items: end;
   align-items: start;
   

3. align-self & justify-self

   Similar to 2, but it applies to individual grid item.

Making gap between columns & rows

For margin, we can make empty column & row. Also we can use gap .

• column-gap: Explicitly declare gap between columns
• row-gap: Explicitly declare gap between rows

column-gap: 2em;
row-gap: 1em;

// shorthand
gap: 1em /2em;

• Gaps at the outer top, bottom, left, right is not added, so we have to use the empty column & row approach.
• Also used for flexbox.

grid-areas

Give names to different parts of grid.

.grid {
    grid-template-areas:
        "sidebar header header"
        "sidebar content content"
        "sidebar footer footer";
}

.header {
    grid-area: header;
}

.content {
    grid-area: content;
}

• blank grid
  

  // for blank grid
  grid-template-areas: 
      "header header header"
      ". content ."
      ". sidebar ."
      "footer footer footer";
  

• grid-area + media query
  

  .grid {
      grid-template-columns: 5em auto 5em;
      grid-template-areas: 
      "header header header"
      ". content ."
      ". sidebar ."
      "footer footer footer"; 
  }
  
  @media (min-width: 600px) {
      .grid {
          grid-template-columns: 1em auto 150px 1em;
          grid-template-areas: 
              ". header header ."
              ". content sidebar ."
              ". footer footer ."
      }
  }
  

minmax()

Setting a min-width and max-width to our template columns and rows.

grid-template-columns: 1em minmax(100px, 200px) auto 1em;

fr unit

fr unit is used to distribute a fraction of available space. It makes the item behave like a flex item with flex: 1 1 auto .

Easiest way to create equal columns.

• We cannot use fr for minimum value

  Instead we can use auto or 0px .
  

  grid-template-columns: 1fr minmax(250px, 1fr) 1fr;
  
  grid-template-columns: 1fr 1fr minmax(auto, 500px);