# grid-auto-columns property

The `grid-auto-columns` property specifies a number and width of columns that an element will occupy in an implicitly-created grid. Implicitly-created grid - a grid that is created automatically when elements go beyond the already designated grid. In the property value, specify the width of the columns in any size units. The property is specified on the parent element and determines the width of the columns of child elements.

## Syntax

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

## Example

Let's set the column widths for our elements in the implicitly-created grid:

`<div id="parent"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>` `#parent { display: grid; grid-template-rows: 40px 40px; grid-auto-columns: 200px; border: 2px solid #696989; padding: 10px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## See also

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

← →
↑
en ru