Egenskapen grid-template

Egenskapen grid-template anger antalet och bredden på rader och kolumner som ett element kommer att uppta i ett grid och är en förkortad form av egenskaperna grid-template-rows och grid-template-columns. Raderna och kolumnerna där elementet ska placeras anges genom ett snedstreck. Egenskapen grid-template anges i föräldraelementet och bestämmer placeringen av barnelementen. I egenskapens värde anger vi bredden på rader eller kolumner i valfria enheter för storlekar.

När man anger värden i pixlar i egenskaperna kommer elementens storlekar exakt att motsvara dessa. Om vi anger ordet auto kommer kolumnerna och raderna att fylla all tillgängligt utrymme. Användning av enheten fr (fraktion) betyder att allt utrymme kommer att delas upp i lika delar. Fördelen med fr är dess anpassningsförmåga till olika behållare eller skärmupplösningar, eftersom fr helt enkelt delar upp dem i det angivna antalet fraktioner utan koppling till en exakt storlek i pixlar.

Syntax

selector {
	grid-template: bredd och antal rader / bredd och antal kolumner;
}

Exempel

Låt oss med hjälp av egenskapen grid-template skapa en tabell:

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

Exempel

Och låt oss nu ge den andra och tredje raden samma bredd, och varje kolumn en olika bredd:

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

Exempel

Och låt oss nu i tabellen från föregående exempel göra den övre raden två fraktioner bred, och den första kolumnen en halv fraktion:

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

Se även

egenskapen grid,
som anger en förkortad notation för egenskaper för kolumner och rader
egenskapen grid-template-rows,
som anger antalet och bredden på rader i ett grid
egenskapen grid-template-columns,
som anger antalet och bredden på kolumner i ett grid