Egenskaben grid-template

Egenskaben grid-template angiver antallet og bredden af rækker og kolonner, som et element vil optage i et grid eller et net og er en forkortet form af egenskaberne grid-template-rows og grid-template-columns. Rækker og kolonner, hvorpå elementet vil blive placeret, angives via en skråstreg. Egenskaben grid-template angives i forældreelementet og bestemmer placeringen af barneelementer. I egenskabens værdi angiver vi bredden af rækker eller kolonner i enhver enhed for størrelser.

Ved angivelse af værdier i pixel i egenskaberne vil elementernes størrelser nøjagtigt svare til dem. Hvis vi angiver ordet auto, vil kolonner og rækker fylde al tilgængelig plads. Brug af enheden fr (fraktion) betyder, at alt plads vil blive opdelt i lige store dele. Fordelen ved fr er dens adaptivitet til forskellige containere eller skærmopløsninger, da fr simpelthen opdeler dem i det angivne antal fraktioner uden binding til en nøjagtig størrelse i pixels.

Syntaks

selektor {
	grid-template: bredde og antal rækker / bredde og antal kolonner;
}

Eksempel

Lad os med egenskaben grid-template lave en tabel:

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

Eksempel

Og lad os nu give anden og tredje række samme bredde, og hver kolonne - en forskellig bredde:

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

Eksempel

Og lad os nu i tabellen fra forrige eksempel lave den øverste række med en bredde på to fraktioner, og den første kolonne - på 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 også

egenskaben grid,
som angiver en forkortet notation for egenskaber for kolonner og rækker
egenskaben grid-template-rows,
som angiver antallet og bredden af rækker i et grid
egenskaben grid-template-columns,
som angiver antallet og bredden af kolonner i et grid