# grid-template-columns property

The `grid-template-columns` property specifies a number and width of columns that an element will occupy in a grid. The property is specified on the parent element and determines the width of the columns of the child elements. In the property value, specify the width of the columns in any size units.

When specifying values ​​in pixels in properties, the sizes of the columns will correspond exactly to them. If we specify the word `auto`, then the columns will fill all the available space. Using the `fr` (fraction) unit means that the entire space will be divided into equal parts. The advantage of `fr` is its adaptability to different containers or screen resolutions, since `fr` simply divides them into the specified number of fractions without reference to the exact pixel size.

## Syntax

`selector { grid-template-columns: column width; }`

## Example

Let's set a column width for our elements in the grid:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 50px 100px 200px 50px; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's give the first and third columns a fixed width in pixels, and let the second column automatically fill the available space:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: 100px auto 150px; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now, using the `grid-template-columns` property, we’ll make sure that the first and second columns take up one part of the container, and the third column takes up three parts:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: 1fr 1fr 3fr; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Values ​​indicated in `fr` units can take a fractional form. Let's modify the previous example by specifying fractional widths for the second and third columns:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: 1fr 0.5fr 2.5fr; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's set the `grid-template-columns` property to the `repeat()` function, which will tell the container that all three columns should have the same width:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> </div>` `#parent { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now let's change the previous example so that a fourth column is added to three identical columns, which will occupy two fractions of the container:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(3, 1fr) 2fr; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's set the first two columns to be one container fraction wide, and the last two columns to be two container fractions wide:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(2, 1fr) repeat(2, 2fr); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now let's set the width of the columns by combining the values ​​​​specified using the `repeat()` function and `fr` units:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr); border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Also in the `repeat()` function you can specify the `auto-fill` value, which will fill our container with identical columns with the width we need:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fill, 200px); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

It is very convenient, together with `auto-fill`, to specify the `minmax` function, which specifies the range of column widths from the minimum to the maximum value. If the width of the container does not accommodate all the columns, then some of them will be moved to a new row, while the columns in the row will be evenly distributed in it. Let's modify the previous example to include the `minmax` function. To see different column layout options, change the page width of your browser:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now let's specify the `auto-fit` property, which differs from `auto-fill` in that it adjusts the number of columns to the available width of the container, expanding or contracting them:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Also, along with `fr`, you can use values ​​in `%`, which also determine which part of the container the column will occupy. In this case, the column size will first be calculated in `%`, and the remaining free space will be divided into fractions:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>` `#parent { display: grid; grid-template-columns: 50% 1fr 2fr 30%; border: 2px solid #696989; padding: 10px; width: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's use the `grid-template-columns` and `grid-template-rows` properties together:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Let's use the `grid-template-columns` and `grid-template-rows` properties. Let's create a table of nine cells arranged in three rows. Moreover, the second and third row will have the same width, and each column will have a different width:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: grid; grid-template-rows: 60px 1fr 60px; grid-template-columns: 20% 1fr 15%; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now in the table from the previous example, let’s make the top row two fractions wide, and the first column half a fraction wide:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div>` `#parent { display: grid; grid-template-rows: 2fr 1fr 1fr; grid-template-columns: 0.5fr 1fr 1fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## See also

- the `grid-template-rows` property
  that specifies a number and width of rows in a grid
- the `grid-auto-columns` property
  that specifies a number and width of columns in an implicitly-created grid

← →
↑
en ru