Tutorials/CSS-Grid/course.md

02 - Starter Files and Tooling

• Firefox has good built-in tools to analyze CSS grid
• Node can help serve HTML files and reload them on change (browser-sync module)
• Wes Bos' repository: https://github.com/wesbos/css-grid.git
• Use Emmet for HTML and CSS
• TODO: Show list of VS code extensions.
• CSS: use box-sizing: border-box as it includes padding and borders

03 - Fundamentals

• Grid organizes page in rectangular grid cells.
• Implicit and explicit rows/columns
• Parent container needs to be display: grid;
  • makes direct children grid items
• grid-template-columns: (size) (size)... defines explicit columns
  • use auto to auto size columns to use up rest of the screen width
• grid-gap: (size) separates columns and rows

04 - CSS Grid Dev Tools

• Firefox can switch on/off grids
• It can also draw lines and show area names.

05 - Grid Implicit vs. Explicit Tracks

• Create explicit columns with grid-template-columns: (size) (size)... or grid-template-rows: (size) (size)...
• Size implicit columns and rows with grid-auto-columns: (size) (size)... and grid-auto-rows: (size) (size)...
  • Implicit rows/columns appear after explicit grid.

06 - grid-auto-flow Explained

• Decides if new elements are placed in rows or columns. Columns is default.
• It can be set with: grid-auto-flow: column or grid-auto-flow: column

07 - Sizing Tracks

• Be careful when using percentages in sizing, they dont take into account margins.
• grid-template-columns: 100px 1fr 1fr 2fr (1fr = fraction) makes 1 100px column, the other share the rest of the screen size with the defined ratio 1:1:2.
• You can combine auto and 1fr

08 - CSS Grid repeat Function

• You can write things like grid-template-columns: repeat(4, 1fr 2fr); instead of grid-template-columns: 1fr 2fr 1fr 2fr;

09 - Sizing Grid Items

• Use grid-column: span 3 or grid-row: span 3
• Will not overflow, but wrap over to the next row
• If wraping doesn't suffice, it will overflow.

10 - Placing Grid Items

• You can explicitely define the start and end tracks of an item with grid-column-start: 2 and grid-column-end: 5 or shorthand grid-column: 2 / 5 or grid-column: 2 / span 3
• Negative numbers are also possible:
  • grid-column: 2 / 5 = grid-column: 2 / -2 for a 5 column layout.

12 - auto-fit and auto-fill

• In the repeat function of grid-template-column or grid-template-row you can use auto-fit or auto-fill as first argument.
• auto-fill will create as many columns/rows as possible, making it possible to move items at the end of the screen
• auto-fit will create as many columns/rows as possible but without making the grid physically wider
  • So the main difference is for few items and when using grid-column-end for an item.

13 - Using minmax() for Responsive Grids

• In the repeat function of grid-template-column or grid-template-row you can use the minmax function as second argument.
• It allows to give a minimum and maximum value for an item width/height.
• In combination with fr for the max width and auto-fit in the repeat function, this can help to create responsive designs.
• Another solution is to use grid-template-column: fit-content(100px) 150px 150px which for the first column will fit the content into the box, but set an upper limit to 100px for the width.

14 - Grid Template Areas

• Layout the grid as follows

  .content {
  gird-template-columns: (add your values)
  grid-template-area:
      "sidebar-1   header     sidebar-2"
      "sidebar-1   content    sidebar-2"
      "footer      footer     footer";
  }
  .item1 {
  grid-area: sidebar-1;
  }
  .item2 {
  grid-area: header;
  }
  .item3 {
  grid-area: sidebar-2;
  }
  .item4 {
  grid-area: content;
  }
  .item5 {
  grid-area: footer;
  }
  

• Now you can use media queries and redefine the grid area:

  @media (max-width: 500px) {
  .container {
  grid-template-areas:
    "content    content   content"
    "sidebar-1  sidebar-1 sidebar-2"
    "footer     footer    footer";
  }
  }
  

• When you have areas, you get line names for free, so footer-start and footer-end is automatically available for things like grid-column: footer-start / footer-end;

15 - Naming Lines in CSS Grid

• Name lines (space between columns or rows) like this: grid-template-columns: [first-line] 1fr [second-line] 1fr [last-line];
• Then you can use the names: grid-column: first-line / last-line instead of grid-column: 1 / 3
• You can assign more than one name per line.

16 - grid-autoflow-dense Block Fitting

• If items dont fit in columns due to their span, the space before them remains unused.
• With grid-auto-flow: dense; this space is filled with subsequent items.

17 - CSS Grid Alignment and Centering