Grid Sizing

Metadata

• 📅 Date :: 09-06-2025
• 🏷️ Tags :: web-dev

---

Notes

CSS Grid: Sizing Columns and Rows

This lesson focuses on different ways to define the dimensions of columns and rows in CSS Grid, ensuring both precise control and responsiveness.

1. Fixed Size Grids (Non-Responsive)

• Method: Define grid-template-columns and grid-template-rows using absolute units like px or rem.
• Example:

  .container {
      display: grid;
      grid-template-columns: 400px 800px; /* Two columns: 400px wide, 800px wide */
      grid-template-rows: 100px 200px;   /* Two rows: 100px high, 200px high */
  }

• Behavior:
  • The grid will strictly adhere to these specified sizes.
  • Not Responsive: It will not adapt to changes in viewport width or height. Content might overflow on smaller screens.
  • rem: While rem is relative to the root font size, it still results in a fixed-size grid relative to that root font size, not the screen size.

2. grid-template Shorthand

• Purpose: Combines grid-template-rows and grid-template-columns into a single property.
• Syntax: grid-template: <row-sizes> / <column-sizes>;
• Example:

  .container {
      display: grid;
      grid-template: 100px 200px / 400px 800px; /* Rows first, then a slash, then columns */
  }

• Recommendation: While concise, it’s generally recommended to use grid-template-rows and grid-template-columns explicitly when learning or for better readability and debugging, as it makes the row and column definitions clearer.

3. auto Keyword for Responsiveness

The auto keyword behaves differently for columns and rows.

• auto for Columns (grid-template-columns):

  • The column will try to take up 100% of the available horizontal space after any fixed-size columns are accounted for.
  • It will grow and shrink responsively to fill the width of the container.
  • Example: grid-template-columns: 200px auto; (First column fixed at 200px, second column takes remaining width).

• auto for Rows (grid-template-rows):

  • The row will size itself to fit its content.

  • It will not try to take up 100% of the available vertical space of the screen.

  • Example: grid-template-rows: 100px auto; (First row fixed at 100px, second row height adjusts to content).

  • Diagram: auto Column vs. auto Row

    graph TD
        subgraph Auto Column Example
            A[Grid Container]
            A --> B["Col 1 (200px)"]
            A --> C["Col 2 (auto: grows/shrinks)"]
            style A fill:#e0f2f7,stroke:#00796B,stroke-width:2px;
            style B fill:#bbdefb,stroke:#2196F3,stroke-width:1px;
            style C fill:#bbdefb,stroke:#2196F3,stroke-width:1px;
        end
    
        subgraph Auto Row Example
            D[Grid Container]
            D --> E["Row 1 (100px)"]
            D --> F["Row 2 (auto: fits content)"]
            style D fill:#ffe0b2,stroke:#FB8C00,stroke-width:2px;
            style E fill:#fff9c4,stroke:#FBC02D,stroke-width:1px;
            style F fill:#fff9c4,stroke:#FBC02D,stroke-width:1px;
        end
    

    This diagram differentiates how auto works when applied to a column (fills remaining space horizontally) versus a row (fits content vertically).

4. Fractional Unit (fr) for Ratios

• Purpose: Defines sizes as a fraction of the available free space in the grid container.
• Behavior: Highly responsive; columns/rows defined with fr will grow and shrink proportionally.
• Example:

  .container {
      display: grid;
      grid-template-columns: 1fr 2fr; /* Col 1 is 1/3 of available space, Col 2 is 2/3 */
      grid-template-rows: 1fr 0.5fr;  /* Row 1 is 2/3 height, Row 2 is 1/3 height (of content-based space) */
  }

• Important Note: While fr works for both, fractional units primarily distribute available free space. For rows, fr usually distributes space among the rows based on their content and the container’s height, or if the container’s height is explicit, then it distributes that explicit height. Columns, however, more directly distribute the available horizontal space.

5. minmax() Function

• Purpose: Defines a size range for a grid track (column or row), allowing it to be responsive within specified minimum and maximum bounds.
• Syntax: minmax(min-value, max-value)
• Example:

  .container {
      grid-template-columns: minmax(200px, 1fr) 500px;
      /* First column: minimum 200px, maximum 1 fraction of remaining space */
      /* Second column: fixed 500px */
  }

• Behavior: The track will try to be its ideal size (e.g., 1fr), but it will not shrink below min-value or grow beyond max-value. This is crucial for controlling responsiveness and preventing content issues.

6. repeat() Function

• Purpose: A shorthand to define multiple columns or rows with the same size. Saves repetitive typing.
• Syntax: repeat(count, track-size)
• Example (Chessboard):

  .container {
      grid-template-columns: repeat(8, 100px); /* 8 columns, each 100px wide */
      grid-template-rows: repeat(8, 100px);    /* 8 rows, each 100px high */
  }

• Benefit: Highly useful for grids with many uniform tracks.

7. Handling Grid Items Beyond Defined Template

• Defined Grid vs. Actual Items: You can define a grid template (e.g., 2 rows, 3 columns) but only have fewer items (e.g., 4 items). The items will fill the grid from top-left to bottom-right, leaving empty cells.
• More Items Than Defined Grid: If you have more grid items than your explicitly defined grid-template-rows and grid-template-columns, Grid will automatically create “implicit” rows or columns to accommodate the extra items.
• grid-auto-rows & grid-auto-columns:
  • Purpose: Define the size of implicitly created rows or columns.
  • Default: auto (meaning they will size to fit content).
  • Example:

    .container {
        grid-template-columns: 200px 200px; /* Defined 2 columns */
        grid-auto-rows: 300px;             /* Any extra rows will be 300px high */
    }

    If you have 5 items in a 2-column grid, the 5th item will go into an automatically created 3rd row, which will be 300px high.

8. Debugging with Chrome Developer Tools

• Inspect Grid:
  1. Open Developer Tools (Right-click → Inspect, or F12).
  2. Select the HTML element that has display: grid;.
  3. A small “grid” badge will appear next to the element in the Elements panel. Click it.
  4. An overlay will appear on your page, showing the grid lines, gaps, and sometimes track sizes.
• Layout Tab:
  1. In the Developer Tools, go to the “Layout” tab (usually next to “Styles”).
  2. This tab provides options to visualize the grid:
     • Toggle grid lines visibility.
     • Show track names/sizes.
     • Extend grid lines.
     • Customize overlay colors.
• Benefit: Invaluable for understanding how Grid is interpreting your CSS, especially when dealing with complex or responsive layouts.

9. Exercise: Grid Sizing Challenge

Goal: Recreate a specific responsive grid layout using only CSS on the grid container.

Key Observations from Goal (Responsive Behavior):

• Rows:
  • First two rows: Content-sized (e.g., 1fr for each, or auto).
  • Third row: Twice the height of the first two (e.g., 2fr).
  • Fourth row (implicit): Fixed height (e.g., 50px).
• Columns:
  • First column: Expands/shrinks responsively (like auto or 1fr).
  • Second column: Fixed 400px wide.
  • Third column: Has a minmax range (e.g., minmax(200px, 500px)).

Solution Strategy:

1. display: grid;: On the container.
2. grid-template-rows: Define the 3 explicit rows based on their relative heights.
   • 1fr 1fr 2fr
3. grid-template-columns: Define the 3 columns based on their responsive behavior/fixed size.
   • auto 400px minmax(200px, 500px)
4. grid-auto-rows: Define the height for any implicitly created rows (the 4th one in the example).
   • 50px

Example CSS (Simplified):

.grid-container {
    display: grid;
    grid-template-rows: 1fr 1fr 2fr; /* 3 explicit rows */
    grid-template-columns: auto 400px minmax(200px, 500px); /* 3 columns */
    grid-auto-rows: 50px; /* For any implicit rows (like the 4th one) */
}

---

References

• Display-Grid
• Exercise