# grid-template property

The `grid-template` property specifies a number and width of rows and columns that an element will occupy in a grid and is a shorthand for the `grid-template-rows` and `grid-template-columns` properties. The rows and columns in which the element will be placed are indicated by a slash. The `grid-template` property is set on the parent element and determines the position of the child elements. In the property value, specify the width of rows or columns in any size units.

When you specify property values ​​in pixels, the sizes of elements will correspond exactly to them. If we specify the `auto` word, then the columns and rows 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: width and number of rows / width and number of columns; }`

## Example

Let's use the `grid-template` property to create a table:

`<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: 1fr 1fr 1fr / 1fr 1fr 1fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 400px; } #parent > div { padding: 10px; border: 1px solid #696989; }`

:

## Example

Now let's give the second and third rows the same width, and each column 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: 60px 1fr 60px / 20% 1fr 15%; border: 2px solid #696989; padding: 10px; width: 400px; height: 300px; } #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: 2fr 1fr 1fr / 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` property
  that specifies a shorthand for columns and rows properties
- the `grid-template-rows` property
  that specifies a number and width of rows in a grid
- the `grid-template-columns` property
  that specifies a number and width of columns in a grid

← →
↑
en ru