The 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;
}

The grid-template property

Syntax

Example

Example

Example

See also