Course Content
CSS Tutorial
About Lesson

Grid lines and tracks

CSS Grid Layout offers a powerful system for creating two-dimensional layouts on the web. Grid lines and tracks are fundamental concepts within CSS Grid that allow precise control over the placement and sizing of elements.

What are Grid Lines?

Grid lines are the dividing lines that form the structure of a CSS Grid. These lines create the columns and rows, defining the layout structure. Each grid line has a numerical index representing its position within the grid.

Types of Grid Lines:

  1. Explicit Grid Lines:

    • Defined explicitly using properties like grid-template-rows and grid-template-columns. These properties allow developers to set specific sizes for rows and columns, thereby creating explicit grid lines.
  2. Implicit Grid Lines:

    • Generated automatically to accommodate additional content beyond the explicitly defined grid. Elements placed outside the explicit grid generate implicit grid lines.

What are Grid Tracks?

Grid tracks refer to the space between two adjacent grid lines. They form the columns and rows of the grid layout and can be sized using various CSS properties.

Sizing Grid Tracks:
  1. Fixed-Sized Tracks:

    • Set specific sizes using length units (px, em, rem, etc.) to create fixed-sized tracks.
  2. Flexible-Sized Tracks:

    • Utilize relative units (fr – fraction unit) to create tracks that scale proportionally based on available space. Using fr, you can define flexible-sized tracks within the grid.
Managing Grid Lines and Tracks:
    • Define the number and size of columns and rows respectively. For example:

      grid-template-columns and grid-template-rows:

    grid-template-columns: 100px 1fr 2fr; /* Creates three columns of fixed, flexible, and flexible sizes */
    • Place items within specific grid tracks using line numbers or names.

      grid-column and grid-row:

  1. grid-column: 2 / 4; /* Places an item between the second and fourth column */
    • Set the gap between grid tracks, enhancing readability and visual appeal.

      grid-gap:

  2. grid-gap: 10px; /* Creates a 10px gap between grid tracks */

Best Practices:

  • Use named grid lines for improved readability and maintainability of code.
  • Combine fixed and flexible-sized tracks for versatile layouts.
  • Utilize the DevTools in browsers to visualize grid lines and tracks, aiding in debugging and layout adjustments