Basics

• flex only allows you to operate on one axis at a time; what if you want to have both rows and columns?

• set display: grid on parent

  • margins no longer collapse, direct children become grid items

• you specify the width of columns and height of rows, and the content just fills up those rows and columns:

  grid-template-columns: 200px 200px 350px;
  grid-template-rows: 50px 200px;
  

  • alternatively, you can see this in shorthand:

    /* rows first, then columns */
    grid-template: 50px 200px / 200px 200px 350px;
    

• by default, items automatically flow (from left to right, top to bottom). but you can specify their exact position. each column/row line is numbered, starting from 1.

  

  • can set grid-row-start, grid-row-end, grid-column-start, and grid-column-end to specify the boundaries of an item

• shorthands:

  .example {
  	grid-row: start / end;
  	grid-column: start / end;
  }
  

• also, counting backwards, the rows/columns are -1, -2, -3, etc. so you can set grid-row: 1 / -1 to extend across all the rows

• content will flow automatically to prevent overlap; but if you explicitly set them to overlap, they'll overlap

• instead of giving a line number to end at, you can set the number of rows/columns to span across, e.g.

  • grid-column: 2 / span 2; start at column 2, and span across 2 columns.
  • or grid-column: span 2; start at whatever column it can, and span across 2 columns.
  • also, if you don't provide a number to end at, the item will end at +1 from where it started. e.g. grid-column: 2 will start at line 2 and end at 3.
  • same applies for grid-row

• setting the height of a row (or width of a column) to a makes it resize based on the content. the height of a whole row is then the height of its tallest item.

  • the default height for a row is auto. so if content flows beyond your last grid-defined row, that extra row's height will just depend on the content inside it.
  • note that for columns, setting a width of auto will make the column take up any extra space that's available (based on the width of the grid container)

• align-items determines how items in a row are vertically aligned. justify-items determines how items are horizontally aligned within their column. can be set to start , end, baseline, center.

  • can do this on an individual element with an align-self and justify-self
  • the default value for both justify-items and align-items is stretch.

• when an element is inside a css grid cell, setting width: 100% or height: 100% makes its width or height 100% of the cell rather than the containing element!

Styling with grid

• set up all the gridlines on your design and use those lines to determine your high-level grid:

  

  • this is better than trying to create nested grids; it allows all of your markup to be at one level of hierarchy!
  • you can also create grid lines for the "gutters" at the ends of your page, rather than adding padding/margin to the child elements themselves.

Grid gaps

• can set grid-column-gap: 2em; to set a 2em space between each column. same idea for grid-row-gap. shorthand is grid-gap: 1em 2em; (rows, then columns).
  • note that the gap is between columns/rows, not on the outside of the first or last column/row.
  • the grid-gap property is being replaced by gap, and it will work for both grid and flexbox (but currently, gap is only supported on Firefox).

Implicit vs explicit grid

• setting values for grid-template-rows and grid-template-columns sets up the explicit grid
• however any extra content that you have will be slotted into an implicit grid (e.g. additional rows created). also, if you set an element's grid-row or grid-column to be higher than the explicitly defined rows/columns, you also create implicit rows/columns that way.
• by default, implicit rows and columns have a size of auto, but you can set this with grid-auto-rows: 100px or grid-auto-columns