CSS Grid Layout Explained in Detail

Description
CSS Grid Layout is a two-dimensional layout system specifically designed for handling page layouts in both row and column directions. Unlike Flexbox (a one-dimensional layout), Grid can control arrangements in both directions simultaneously, making it ideal for constructing complex overall webpage structures.

Core Concepts

1. Grid Container: The element set with display: grid
2. Grid Items: Direct child elements of the Grid container
3. Grid Lines: Lines that divide the grid, including horizontal and vertical lines
4. Grid Tracks: The space between two adjacent grid lines (rows or columns)
5. Grid Cell: The smallest unit enclosed by four grid lines
6. Grid Area: Any rectangular area composed of multiple cells

Basic Usage Steps

Step 1: Create a Grid Container

.container {
  display: grid; /* or inline-grid */
}

Step 2: Define the Grid Structure

• Use grid-template-columns to define column widths
• Use grid-template-rows to define row heights

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px; /* Three columns with widths of 100px, 200px, and 100px respectively */
  grid-template-rows: 50px 100px; /* Two rows with heights of 50px and 100px respectively */
}

Step 3: Using Units

• fr Unit: Distributes remaining space proportionally

.container {
  grid-template-columns: 1fr 2fr 1fr; /* The middle column is twice as wide as the sides */
}

• repeat() Function: Simplifies repetitive definitions

.container {
  grid-template-columns: repeat(3, 1fr); /* Equivalent to 1fr 1fr 1fr */
}

Step 4: Grid Gaps

.container {
  gap: 10px; /* Both row and column gaps are 10px */
  /* Or set separately */
  row-gap: 10px;
  column-gap: 20px;
}

Step 5: Item Placement

• Placement by Grid Lines:

.item {
  grid-column-start: 1; /* Start from the 1st vertical line */
  grid-column-end: 3;   /* End at the 3rd vertical line */
  grid-row-start: 1;    /* Start from the 1st horizontal line */
  grid-row-end: 2;      /* End at the 2nd horizontal line */
  
  /* Shorthand */
  grid-column: 1 / 3;   /* start-line / end-line */
  grid-row: 1 / 2;
}

• Placement by Grid Areas:

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

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Step 6: Alignment Methods

• Alignment Within Container (justify-items, align-items)
• Item Self-Alignment (justify-self, align-self)
• Overall Content Alignment (justify-content, align-content)

Practical Application Example

.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 80px 1fr 60px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  gap: 10px;
  height: 100vh;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

Grid Layout provides powerful two-dimensional layout capabilities. By reasonably combining these properties, various complex page layout structures can be easily achieved.