askvity

How Do I Set the Number of Columns in a Grid in CSS?

Published in CSS Grid Layout 3 mins read

To set the number of columns in a CSS Grid layout, you use the grid-template-columns property on the grid container element.

According to the provided reference, "the CSS property grid-template-columns is used on the grid container" to specify both the number of columns and their widths. The crucial point is that "The number of width values determines the number of columns".

Understanding grid-template-columns

The grid-template-columns property defines the column tracks of the grid. Each value you list for this property represents a single column, and the value itself defines the width of that column.

For instance, if you provide three values, your grid will have three columns. If you provide four values, it will have four columns, and so on.

.grid-container {
  display: grid;
  grid-template-columns: /* List column widths here */;
}

Specifying Column Widths and Counts

The reference mentions that column width values "can be either in pixels( px ) or percentages(%)". However, CSS Grid offers several other flexible units and functions that are commonly used to define column sizes:

  • Absolute Units: Like pixels (px). grid-template-columns: 100px 200px 100px; creates three columns with fixed widths.
  • Relative Units: Like percentages (%) or viewport units (vw). grid-template-columns: 25% 50% 25%; creates three columns using percentages of the container's width.
  • fr Unit: A fractional unit representing a fraction of the available space in the grid container. This is very common for flexible layouts. grid-template-columns: 1fr 1fr 1fr; creates three equal-width columns that share the available space.
  • auto Keyword: Automatically sizes a column based on its content or the remaining space. grid-template-columns: 100px auto 1fr; creates a 100px column, a column sized automatically, and a column taking up the remaining space.
  • repeat() Function: A shorthand to repeat a pattern of column definitions. grid-template-columns: repeat(4, 1fr); is a concise way to create four equal-width columns. grid-template-columns: repeat(3, 100px 1fr); creates a pattern of (100px, 1fr) three times, resulting in six columns.

Practical Examples

Here are some examples demonstrating how to set the number and size of columns using grid-template-columns:

  • Creating a 2-column layout:
    .container-2col {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
}
  • Creating a 3-column layout with fixed and flexible widths:
    .container-3col {
  display: grid;
  grid-template-columns: 150px auto 2fr; /* Three columns: fixed, auto, and 2x fractional unit */
}

    (Note: This example incorporates units like px, auto, and fr for practical insight, building upon the px and % mentioned in the reference.)

  • Creating a 4-column layout using repeat():
    .container-4col {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr)); /* Four columns, each at least 100px wide but growing to fill space */
}

By defining the list of values for the grid-template-columns property on your grid container, you directly control how many columns your grid will have and how wide each one will be.

Related Articles