Grid-template-columns
The CSS grid-template-columns property defines the sizes and optional names of a grid’s column tracks and grid lines.
Web Design Playground, Second Edition
The CSS grid-template-columns property specifies the number, sizes, and track definitions of a grid's columns.
- How it is used
- Defines column tracks for grid containers, including a centered overall page layout.
- How deep it goes
- Explains track-value syntax, units, keywords, automatic rows, and a practical fractional-column layout.
- Examples
- Uses fixed three-column tracks and a `1fr auto 1fr` body grid that centers a nested content container.
- What you can do after
- Apply it to define fixed, automatic, or fractional grid columns and center content with a three-column layout.
Read how Web Design Playground, Second Edition explains grid-template-columns →
CSS in Depth, Second Edition
The CSS grid-template-columns property defines the sizes and optional names of a grid container's column tracks and grid lines.
- How it is used
- Defines column widths and lines for grid layouts, from equal-sized boxes to a main-content-and-sidebar page.
- How deep it goes
- Works through fraction-based sizing, mixed widths, named lines, repeated patterns, and parent-line inheritance with subgrid.
- Examples
- Uses a six-item grid, a main-content-and-sidebar page, and repeated named column lines.
- What you can do after
- Build it from scratch: size grid columns and name their boundaries for item placement.
Read how CSS in Depth, Second Edition explains grid-template-columns →
Tiny CSS Projects
The CSS grid-template-columns property defines the sizes and number of columns in a grid.
- How it is used
- Defines the number and sizes of columns on a grid container.
- How deep it goes
- Works through track lists, repeated columns, minimum widths, and fractional sizing without detailing browser layout algorithms.
- Examples
- Uses a three-column `main` layout and equal-versus-unequal `fr` shares to demonstrate track sizing.
- What you can do after
- Build it from scratch: define fixed and flexible columns on a CSS Grid container.
Build a Website with ChatGPT
The CSS grid-template-columns property defines the number and widths of columns in a grid container.
- How it is used
- Uses CSS Grid to place article and aside content in proportionally sized columns.
- How deep it goes
- Explains fractional units and editable ratios, while deferring complete small-screen responsiveness.
- Examples
- Demonstrates article-and-aside layouts using 2fr 1fr, 3fr 1fr, and 1fr 2fr.
- What you can do after
- Apply it via CSS to create and customize a two-column article layout.
Read how Build a Website with ChatGPT explains grid-template-columns →
Related concepts
- CSS Gridconfigures · CSS Grid is a CSS layout system for arranging elements in two-dimensional rows and columns.
- repeat()configured by · The CSS repeat() function specifies a repeated sequence of grid track sizes or patterns, using a fixed or automatically determined repetition count.
- fraction unitused by · The CSS fr unit represents a share of the free space remaining in a grid container after non-flexible track sizes and other deductions are accounted for.
- explicit gridconfigures · An explicit grid is the portion of a CSS Grid whose rows and columns are directly defined by grid-template properties.
- explicit track creationconfigures · Explicit track creation is the definition of grid rows or columns directly by a grid declaration.
- grid containerconfigures · A grid container is an element whose display mode establishes a CSS Grid formatting context for laying out its child elements as grid items.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.