CSS Grid Template Columns

Overview

This lecture covers the CSS property grid-template-columns, which defines column sizing and line names in a CSS grid layout.

grid-template-columns Basics

• grid-template-columns sets the line names and track sizing functions for columns in a CSS grid container.
• This property has been widely supported by browsers since 2017.
• Typical usage: grid-template-columns: 1fr 60px; or grid-template-columns: 100px 1fr;.

Value Types and Syntax

• Accepts several types of values: length (px, em), percentage (%), flexible fraction (fr), and keywords (auto, max-content, min-content).
• Can include line names using square brackets, e.g., [start] 100px [middle] 1fr [end].
• Advanced functions:
  • minmax(min, max): sets a size range for a column.
  • fit-content(length/percentage): clamps the column to content but limits its max size.
  • repeat(n, value): repeats a pattern n times or uses auto-fill/auto-fit for dynamic layouts.
  • subgrid: inherits grid lines from the parent grid.
  • masonry: experimental masonry-style layout.

Key Examples

• Example: grid-template-columns: 50px 1fr; creates two columns, the first fixed at 50px, the second taking the remaining space.
• Line names: grid-template-columns: [col1] 100px [col2] 1fr [col3]; allows naming grid lines for item placement.

Behavior and Special Cases

• Using none means columns are not explicitly defined; columns will use grid-auto-columns size.
• If a percentage is used, it refers to the inline size of the grid container.
• The fr unit divides leftover space proportionally.
• The value auto can be minimum or maximum depending on context, often behaves like min-content for min and max-content for max.

Key Terms & Definitions

• grid-template-columns — CSS property defining the number, size, and names of columns in a grid.
• fr — Fractional unit for dividing available space.
• minmax(min, max) — Function to constrain a track between minimum and maximum size.
• auto-fill / auto-fit — Repeat options that automatically create as many columns as fit in the container.
• max-content/min-content — Keywords for sizing tracks based on the largest/smallest content.
• subgrid — Inherits track sizing from the parent grid axis.

Action Items / Next Steps

• Practice writing different grid-template-columns values using px, fr, auto, minmax(), and repeat().
• Experiment with named grid lines and advanced patterns like auto-fill and subgrid.
• Review the related properties: grid-template-rows, grid-template-areas, and grid-template.
• Read Basic concepts of grid layout: grid tracks for deeper understanding.