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

• In CSS grid:
  • align-* is in column axis
  • justify-* is in row axis
• 3 different targets:
  • align-items
  • align-content
  • align-self
• CSS shorthand: place-items: center start; = align-items: center; justify-items: start;
• *-items is used on the grid container and affects the grid items. Values are stretch (default), center, start, end
• *-content is also used on the grid container and affects the grid content if the items don't fill all the space (e.g. with fixed widths). Values are start (default), center, end, space-between (very useful), space-between, space-evenly
• *-self is used on the grid items. It overrides the container setting on an item to item basis.

18 - Re-Ordering Grid Items

• order: 1 gives items a fixed order. Default is 0
• Attention: Screen readers and browsers only use this for placement. Selecting and screen reading works on the HTML source.

19 - Nesting Grid Image Gallery

• Grids can be nested
• A grid item can also be a grid container for other items
• Overlays can be realized with fixed positioned elements that switch between display: none and display: grid
• Within the overlay, grid can help to position the content with justify-items and align-items
• Use grid-auto-flow: dense to fill unused space in the grid.
• CSS object-fit: fill | contain | cover | none | scale-down defines how elements fill up space of their parent.
• Use translate or other properties together with transistion for animations.