CSS Grid (2D Layout)

CSS Grid is a powerful layout system designed for dividing space into a grid structure, allowing you to position elements precisely into cells defined by intersecting rows and columns. It is primarily used for large-scale page layout, while Flexbox (P2.3) is better for arranging content inside components.

1. The Grid Container and Items

Like Flexbox, Grid works on a parent-child relationship:

• Grid Container: The parent element where you set display: grid;.
• Grid Items: The direct children of the Grid Container.

.grid-container {
  display: grid; /* Initializes the 2D grid context */
  /* Properties below define the structure of the grid */
}

2. Defining the Grid Structure

The most critical step is defining the tracks (columns and rows) using the grid-template properties.

A. Columns and Rows

You define the size and number of the columns and rows by listing their sizes in order.

B. The fr Unit (Fractional Unit)

The fr unit is unique to Grid and is highly important. It represents a fraction of the available free space in the grid container.

.grid-container {
  /* Three columns: 200px wide, and two equal-sized fractional columns */
  grid-template-columns: 200px 1fr 1fr; 
}
/* The 1fr columns will split the space remaining after the 200px column is allocated. */

C. The repeat() Function

The repeat() function is a powerful shorthand for creating identical tracks.

/* Creates a 4x4 grid where all 16 cells are equal size */
grid-template-columns: repeat(4, 1fr); 
grid-template-rows: repeat(4, 1fr);

D. The minmax() Function

This function allows a track to be flexible, but ensures it never gets smaller than a minimum size or larger than a maximum size.

/* Creates three columns: the center column is flexible, but must be at least 300px wide */
grid-template-columns: 1fr minmax(300px, 2fr) 1fr; 

3. Placing Grid Items

Grid items can be placed automatically or explicitly by referencing the grid lines or grid areas.

A. Placement by Grid Lines

Grid lines are the lines between the tracks, starting from 1.

B. Placement by Grid Areas

Grid Areas allow you to name sections of your layout (e.g., header, sidebar, footer) and arrange them visually in the CSS.

• Define Names in the Container:

.grid-container {
  grid-template-columns: 1fr 3fr;
  /* Define the layout visually using ASCII art */
  grid-template-areas: 
    "header header" 
    "nav    main"
    "footer footer";
}

• Assign the Area to the Item:

.page-header {
  grid-area: header; /* This item will occupy both "header" cells */
}

.main-content {
  grid-area: main;
}

4. Alignment in Grid

Grid uses the same alignment properties as Flexbox, but they apply to the item within its cell or the tracks within the container.