10. Grid

BootCamp by Dr.Angela

1. Display: Grid

• Flexbox (1D) vs Grid (2D)
  • Flexbox: focuses on flexibility
  • Grid: focuses on precise alignment and spacing
• Example : .container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: 1fr 1fr;
gap: 10px;
}
  • grid-template-columns: defines the number and width of columns
  • grid-template-rows: defines the number and height of rows
  • fr unit: represents a fraction of the available space
  • gap: sets spacing between grid items

2. Grid Sizing

• grid-template shorthand: Defines rows and columns in one line
  • Syntax: grid-template: rows / columns; (ex. grid-template: 100px 200px / 400px 800px;)
• auto : Automatically sizes the track to fit its content (ex. grid-template-rows: 100px auto;)
• Fractional size (fr): Represents a fraction of the available space, Distributes remaining space proportionally
• minmax() size: Sets a minimum and maximum size for a grid track, (ex. grid-template-columns: 200px minmax(400px, 800px);)
• repeat(): Reduces repetition and improves readability, (ex. grid-template-rows: repeat(2, 200px); /* same as 200px 200px */)
• grid-auto-rows: Applies sizing to automatically created rows, Useful when new grid items are added dynamically

3. Grid Placement

• Grid structure terms: Lines(the vertical and horizontal dividing lines of the grid), Tracks(rows or columns between two grid lines), Cells(a single grid unit formed by one row and one column), Containers(the grid parent element), Items(direct children of the grid container)
• order: Changes the visual order of grid items, Works the same way as in Flexbox
• Placing items by cells: Spans an item across multiple grid cells, (ex. grid-column: span 2; grid-row: span 2;)
• Placing items by lines: Positions an item between specific grid lines, (ex. grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: -1;)
  • Grid lines can also be referenced using negative values, Negative numbers count from the end of the grid, (ex. -1 → the last grid line, -2 → the second-to-last grid line)
• grid-area shorthand
  • ex. grid-area: 2 / 1 / 3 / 3;
  • Syntax: grid-row-start / grid-column-start / grid-row-end / grid-column-end

4. Notes

• Visualizing grid lines : Grid lines themselves cannot be styled directly, To visually highlight grid boundaries, use the background-color property on grid items or the grid container, This is commonly used for debugging and layout visualization.