# grid property

The `grid` property is a shorthand form for setting all the properties of columns and rows of a grid container. All values ​​are written separated by a slash in single line.

Using `grid` you can define in one line only one type of properties - explicit (`grid-template-rows` , `grid-template-columns`, `grid-template-areas`) or implicit (`grid-auto-rows`, `grid-auto-columns`, `grid-auto-flow`). Those properties that are left unspecified take on default values.

## Syntax

`element { grid: grid properties; }`

## Example

Let's create a table using the `grid` property:

`<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: 1fr 1fr 1fr / 1fr 1fr 1fr; border: 2px solid #696989; padding: 10px; width: 400px; height: 200px; } #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: 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: 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-template` property
  that specifies a number and width of columns and rows for an element
- 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
- the `grid-template-areas` property
  that specifies a placement of elements in a grid
- the `grid-auto-flow` property
  that sets an automatic placement of elements in a grid

← →
↑
en ru