CSS Grid-Template-Columns Create Flexible Grid Layouts

Introduction

The grid-template-columns property in CSS is a powerful way to define the number and size of columns in a grid layout. It’s been widely supported since July 2020, making it a reliable choice for web developers and designers.

With grid-template-columns, you can specify the line names and track sizing functions of the grid columns, allowing for flexible and dynamic designs. Whether you need fixed-width columns, fractional units, or dynamic sizing based on content, this property has you covered.

In this article, we’ll explore the syntax, values, and practical examples of the grid-template-columns property. By the end, you’ll know how to create responsive and visually appealing grid layouts for your web projects.

Definition and Syntax

The grid-template-columns property in CSS is used to define the columns of a grid container. It allows you to specify the number of columns and their respective sizes, making it crucial for creating flexible and responsive grid layouts.

Syntax

The syntax for the grid-template-columns property is straightforward. It accepts a list of values that define the sizes of the columns. Here is the basic syntax:

grid-template-columns: none | <track-list> | <auto-track-list> | subgrid | masonry;

Explanation

• none: Indicates that there is no explicit grid, meaning any columns will be implicitly generated, and their size will be determined by the grid-auto-columns property.
• <track-list>: A space-separated list of track sizes, which can include fixed lengths (e.g., 100px), flex units (e.g., 1fr), min/max content sizes (e.g., min-content, max-content), and more.
• <auto-track-list>: A more complex track list that includes auto-fill and auto-fit keywords to create responsive grid layouts.
• subgrid: Indicates that the grid will adopt the spanned portion of its parent grid in that axis.
• masonry: Indicates that this axis should be laid out according to the masonry algorithm, which is useful for creating Pinterest-like layouts.

Example

Here is a simple example to illustrate the syntax:

grid-template-columns: 100px 1fr 2fr;

In this example, the grid will have three columns:

• The first column is 100 pixels wide.
• The second column takes up one fraction of the remaining space.
• The third column takes up two fractions of the remaining space.

By understanding the syntax and values of the grid-template-columns property, you can create a wide variety of grid layouts to suit your design needs.

Values Overview

The grid-template-columns property in CSS supports a wide range of values to define the sizes and behavior of grid columns. These values can be categorized into several groups, each serving specific purposes in grid layout design.

Keyword Values

• none: Indicates that there is no explicit grid. Columns will be implicitly generated, and their size will be determined by the grid-auto-columns property.
• subgrid: Signifies that the grid will adopt the spanned portion of its parent grid in that axis.
• masonry: Indicates that the columns should be laid out according to the masonry algorithm, which is useful for creating layouts similar to Pinterest.

Track List Values

Track list values specify the sizes of the columns and can include a combination of fixed lengths, flex units, and other sizing functions.

• <length>: A fixed length value, such as 100px, to set the width of a column.
• <percentage>: A percentage value relative to the inline size of the grid container, such as 50%.
• <flex>: A flex unit, such as 1fr, which allows columns to take up a proportion of the remaining space in the grid container.
• max-content: Represents the largest content contribution of the grid items occupying the grid track.
• min-content: Represents the smallest content contribution of the grid items occupying the grid track.
• minmax(min, max): Defines a size range greater than or equal to min and less than or equal to max.

Auto Track List Values

Auto track list values are used to create responsive layouts that can automatically adjust based on the available space.

• repeat( [ <positive-integer> | auto-fill | auto-fit ], <track-list> ): Allows for the repetition of column patterns, making it easier to create large numbers of columns with recurring patterns.
• fit-content( [ <length> | <percentage> ] ): Calculates the size of the column based on the formula max(minimum, min(limit, max-content)), where minimum is an auto minimum and limit is the track sizing function passed as an argument.

Example

Here’s an example that combines various values:

grid-template-columns: 100px 1fr minmax(150px, auto) repeat(auto-fill, 200px);

In this example:

• The first column is 100 pixels wide.
• The second column takes up one fraction of the remaining space.
• The third column has a minimum size of 150 pixels and a maximum size of auto.
• The fourth column uses the repeat function with auto-fill to create as many 200-pixel wide columns as can fit in the available space.

By understanding and utilizing these values, you can create dynamic and responsive grid layouts that adapt to various screen sizes and content requirements.

Formal Definition

The grid-template-columns property in CSS defines the line names and track sizing functions of the grid columns. This property helps create flexible and responsive grid layouts by specifying the number and size of columns in a grid container.

Initial Value

• Initial Value: none
  • By default, grid-template-columns is set to none, meaning there is no explicit grid. Columns will be implicitly generated, and their size will be determined by the grid-auto-columns property.

Applies To

• Applies To: Grid Containers
  • The grid-template-columns property applies to grid containers, which are elements with their display property set to grid or inline-grid.

Inherited

• Inherited: No
  • The grid-template-columns property is not inherited from the parent element. Each grid container must define its own column template.

Percentages

• Percentages: Refer to the corresponding dimension of the content area
  • When using percentage values in grid-template-columns, the percentages refer to the corresponding dimension of the grid container’s content area.

Computed Value

• Computed Value: As specified, but with relative lengths converted into absolute lengths
  • The computed value of grid-template-columns is calculated based on the specified value, with any relative lengths (such as percentages) converted into absolute lengths.

Animation Type

• Animation Type: Simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
  • The grid-template-columns property can be animated, but the animation type is limited to a simple list of lengths, percentages, or calc values, provided that the only differences are in the values of these components.

Formal Syntax

The formal syntax for grid-template-columns is as follows:

grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>? | masonry;

<track-list>: [<line-names>? <track-size> <track-repeat>* <line-names>?]+;

<auto-track-list>: [<line-names>? <fixed-size> <fixed-repeat>* <line-names>?]* <line-names>? <auto-repeat> [<line-names>? <fixed-size> <fixed-repeat>* <line-names>?]* <line-names>?;

<line-name-list>: [<line-names> <name-repeat>]+;

<line-names>: '[' <custom-ident>* ']';

<track-size>: <track-breadth> | minmax(<inflexible-breadth>, <track-breadth>);

<track-repeat>: repeat([<integer [1,∞]>], [<line-names>? <track-size> <line-names>?]+);

<fixed-size>: <fixed-breadth> | minmax(<fixed-breadth>, <track-breadth>);

<fixed-repeat>: repeat([<integer [1,∞]>], [<line-names>? <fixed-size> <line-names>?]+);

<auto-repeat>: repeat([auto-fill | auto-fit], [<line-names>? <fixed-size> <line-names>?]+);

<name-repeat>: repeat([<integer [1,∞]> | auto-fill], <line-names>+);

<track-breadth>: <length-percentage [0,∞]> | <flex [0,∞]> | min-content | max-content | auto;

<inflexible-breadth>: <length-percentage [0,∞]> | min-content | max-content | auto;

<length-percentage>: <length> | <percentage>;

<fixed-breadth>: <length-percentage [0,∞]>;

Explanation

• none: Indicates that there is no explicit grid. Columns will be implicitly generated, and their size will be determined by the grid-auto-columns property.
• <track-list>: A space-separated list of track sizes, which can include fixed lengths, flex units, min/max content sizes, and more.
• <auto-track-list>: A more complex track list that includes auto-fill and auto-fit keywords to create responsive grid layouts.
• subgrid: Indicates that the grid will adopt the spanned portion of its parent grid in that axis.
• masonry: Indicates that this axis should be laid out according to the masonry algorithm, which is useful for creating Pinterest-like layouts.

By understanding the formal definition and syntax of grid-template-columns, you can effectively use it to create flexible and responsive grid layouts for your web projects.

Examples

Let’s look at some practical examples to better understand how grid-template-columns works. These examples will show how to define grid column sizes using various values and keywords.

Specifying Grid Column Sizes

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
  <div id="areaC">C</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: 20% 1fr 2fr;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

#areaC {
  background-color: orange;
}

Result

In this example, the grid container has three columns. The first column takes up 20% of the grid container’s width. The second column takes up one fraction of the remaining space (1fr), and the third column takes up two fractions of the remaining space (2fr). This creates a layout where the columns adjust their sizes based on the available space and the specified fractions.

Using minmax and fit-content

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
  <div id="areaC">C</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(100px, 1fr) fit-content(200px) auto;
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

#areaC {
  background-color: orange;
}

Result

In this example, the grid container has three columns. The first column has a minimum width of 100 pixels and a maximum width of 1fr. The second column uses the fit-content function with a limit of 200 pixels. The third column takes up the remaining space (auto). This creates a responsive layout where the columns adjust their sizes based on the available space and the content.

Using repeat with auto-fill

HTML

<div id="grid">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

CSS

#grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.item {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

Result

In this example, the grid container uses the repeat function with auto-fill to create as many columns as possible that are at least 100 pixels wide. The minmax(100px, 1fr) function ensures that each column has a minimum width of 100 pixels and can grow to take up one fraction of the remaining space. This creates a responsive layout where the number of columns adjusts based on the available space.

Using Named Lines

HTML

<div id="grid">
  <div id="areaA">A</div>
  <div id="areaB">B</div>
  <div id="areaC">C</div>
</div>

CSS

#grid {
  display: grid;
  width: 100%;
  grid-template-columns: [start] 100px [middle] 1fr [end];
}

#areaA {
  background-color: lime;
}

#areaB {
  background-color: yellow;
}

#areaC {
  background-color: orange;
}

Result

In this example, the grid container uses named lines to define the columns. The first column is 100 pixels wide and is named start. The second column takes up one fraction of the remaining space and is named middle. The third column is named end. This allows for more precise control over the layout and makes it easier to reference specific columns in the grid.

Specifications

The grid-template-columns property is defined by the CSS Grid Layout Module Level 2 specification. This specification outlines the behavior and functionality of grid layouts, including how to define and size grid columns.

Relevant Specifications

• CSS Grid Layout Module Level 2 - Track Sizing: This section defines how tracks (columns and rows) are sized within a grid container. It includes details on the grid-template-columns property and its various values and functions. ( WebsiteUrl )
• CSS Grid Layout Module Level 2 - Subgrids: This section defines the subgrid value, which allows a grid item to adopt the grid lines of its parent grid. This is useful for creating nested grids that align perfectly with their parent grids. ( WebsiteUrl )

Summary

• Track Sizing: Defines the behavior and functionality of the grid-template-columns property, including how to specify fixed lengths, flex units, and other sizing functions.
• Subgrids: Introduces the subgrid value, which allows for the creation of nested grids that align with their parent grids.

By understanding the specifications related to the grid-template-columns property, you can effectively use it to create flexible and responsive grid layouts that adhere to the standards defined by the CSS Grid Layout Module.

Browser Compatibility

The grid-template-columns property is widely supported across modern browsers, ensuring compatibility with a broad range of devices and platforms. This makes it a reliable choice for web developers and designers who aim to create flexible and responsive grid layouts without worrying about compatibility issues.

Supported Browsers

• Google Chrome: Since version 57.0 (March 2017)
• Microsoft Edge: Since version 16.0 (September 2017)
• Mozilla Firefox: Since version 52.0 (March 2017)
• Opera: Since version 44.0 (March 2017)
• Safari: Since version 10.1 (September 2016)

Summary

• Google Chrome: Supported since March 2017 (version 57.0)
• Microsoft Edge: Supported since September 2017 (version 16.0)
• Mozilla Firefox: Supported since March 2017 (version 52.0)
• Opera: Supported since March 2017 (version 44.0)
• Safari: Supported since September 2016 (version 10.1)

By understanding the browser compatibility of the grid-template-columns property, you can ensure that your grid layouts work seamlessly across different browsers and devices. This wide support makes grid-template-columns a go-to tool for modern web development and design.

Related Properties and Concepts

The grid-template-columns property is part of a broader set of CSS properties and concepts that are essential for creating grid layouts. Understanding these related properties and concepts can help you create more complex and responsive designs. Below are some key related properties and concepts:

Related Properties

1. grid-template-rows
   • Defines the number and size of rows in a grid container. This property works similarly to grid-template-columns but applies to rows instead of columns.

   grid-template-rows: 50px 1fr auto;

2. grid-template-areas
   • Allows you to define named areas in the grid, making it easier to place grid items within specific areas.

   grid-template-areas:
     "header header"
     "sidebar main"
     "footer footer";

3. grid-template
   • A shorthand property that combines grid-template-rows, grid-template-columns, and grid-template-areas into a single declaration.

   grid-template:
     "header header" 50px
     "sidebar main" 1fr
     "footer footer" auto;

4. grid-auto-columns
   • Defines the size of any columns that are implicitly created (i.e., not explicitly defined by grid-template-columns).

   grid-auto-columns: 100px;

5. grid-auto-rows
   • Defines the size of any rows that are implicitly created (i.e., not explicitly defined by grid-template-rows).

   grid-auto-rows: 50px;

6. grid-auto-flow
   • Controls how the auto-placement algorithm works, specifying whether items should fill rows or columns first.

   grid-auto-flow: row dense;

Related Concepts

• Grid Tracks: The spaces between grid lines. They can be rows or columns. You define them using properties like grid-template-columns and grid-template-rows.
• Grid Lines: The dividing lines that create the structure of the grid. You can name and reference them using properties like grid-template-areas.
• Grid Areas: Named regions within the grid that can contain one or more grid items. You define them using the grid-template-areas property.
• Grid Gap: The grid-gap property (or gap for short) defines the space between grid items.

  grid-gap: 10px 20px;

• Grid Item Placement: You can place grid items within the grid using properties like grid-column, grid-row, grid-area, and grid-column-start/end, grid-row-start/end.

  .item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

• Subgrid: The subgrid value allows a grid item to adopt the grid lines of its parent grid, creating nested grids that align perfectly with their parent grids.

  grid-template-columns: subgrid;

Summary

• grid-template-rows: Defines the size of rows in the grid.
• grid-template-areas: Defines named areas within the grid.
• grid-template: Shorthand for defining rows, columns, and areas.
• grid-auto-columns: Defines the size of implicitly created columns.
• grid-auto-rows: Defines the size of implicitly created rows.
• grid-auto-flow: Controls the auto-placement algorithm.
• Grid Tracks: The spaces between grid lines.
• Grid Lines: The dividing lines that create the grid structure.
• Grid Areas: Named regions within the grid.
• Grid Gap: The space between grid items.
• Grid Item Placement: Properties for placing grid items.
• Subgrid: Allows nested grids to align with their parent grids.

These tools and techniques are essential for modern web development and design, allowing you to build visually appealing and responsive web pages.

FAQs

What does the grid-template-columns property do in CSS?

The grid-template-columns property defines the number and size of columns in a grid container. It allows you to set fixed widths, flexible widths using fractions (fr), or even dynamic sizes using minmax().

How do I define columns using grid-template-columns?

You can define columns like this:

grid-template-columns: 200px 1fr 2fr;

This creates a grid with three columns: the first one is 200 pixels wide, the second takes up one fraction of the remaining space, and the third takes up two fractions of the remaining space.

Can grid-template-columns be used with auto-fit or auto-fill?

Yes, you can use auto-fit or auto-fill with grid-template-columns for responsive layouts. For example:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

This creates as many columns as possible that are at least 100 pixels wide.

What’s the difference between grid-template-columns and grid-template-rows?

Grid-template-columns sets the structure of columns, while grid-template-rows defines the rows. Together, they determine the overall layout of your grid container.

How does grid-template-columns work with grid-auto-flow?

Grid-template-columns defines the column structure, while grid-auto-flow controls whether items fill rows or columns first when they’re placed automatically within the grid.

What is the subgrid value in grid-template-columns?

The subgrid value allows a grid to adopt the spanned portion of its parent grid in that axis. This is useful for creating nested grids that align perfectly with their parent grids.

What is the masonry value in grid-template-columns?

The masonry value indicates that the columns should be laid out according to the masonry algorithm, which is useful for creating layouts similar to Pinterest, where items of varying heights are arranged efficiently.

How do I use named lines with grid-template-columns?

You can use named lines like this:

grid-template-columns: [start] 100px [middle] 1fr [end];

This allows for more precise control over the layout and makes it easier to reference specific columns in the grid.

Can I use percentages with grid-template-columns?

Yes, you can use percentages to define column sizes. For example:

grid-template-columns: 50% 50%;

This creates two columns, each taking up 50% of the grid container’s width.

What is the fit-content function in grid-template-columns?

The fit-content function calculates the size of the column based on the formula max(minimum, min(limit, max-content)), where minimum is an auto minimum and limit is the track sizing function passed as an argument.

What is the minmax function in grid-template-columns?

The minmax function defines a size range greater than or equal to min and less than or equal to max. If max is smaller than min, then max is ignored, and the function is treated as min.

How do I handle responsive design with grid-template-columns?

You can use the repeat function with auto-fill or auto-fit to create responsive layouts. For example:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

This creates as many columns as possible that are at least 100 pixels wide, making the layout responsive to the available space.

What is the default value for grid-template-columns?

The default value is none, which means there is no explicit grid, and columns will be implicitly generated and sized by the grid-auto-columns property.

By understanding these frequently asked questions about the grid-template-columns property, you can effectively use it to create flexible and responsive grid layouts for your web projects.