Egenskapen grid-template

Egenskapen grid-template angir antall og bredde på rader og kolonner som et element vil oppta i et grid eller et nett og er en forkortet form for egenskapene grid-template-rows og grid-template-columns. Radene og kolonnene der elementet vil bli plassert angis med en skråstrek. Egenskapen grid-template angis i foreldreelementet og bestemmer plasseringen av barneelementer. I verdien til egenskapen angir vi bredden på rader eller kolonner i alle enheter for størrelser.

Ved angivelse av verdier i piksler i egenskapene vil størrelsene på elementene nøyaktig tilsvare dem. Hvis vi angir ordet auto, vil kolonner og rader fylle hele tilgjengelig plass. Bruk av enheten fr (fraksjon) betyr at all plass vil bli delt i like andeler. Fordelen med fr er dens tilpasningsevne til forskjellige beholdere eller skjermoppløsninger, siden fr bare deler dem i det angitte antall fraksjoner uten tilknytning til nøyaktig størrelse i piksler.

Syntaks

velger {
	grid-template: bredde og antall rader / bredde og antall kolonner;
}

Eksempel

La oss ved hjelp av egenskapen grid-template lage 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;
}

Eksempel

Og la oss nå gi den andre og tredje raden samme bredde, og hver kolonne - forskjellig 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 la oss nå i tabellen fra forrige eksempel gjøre den øverste raden to fraksjoner bred, og den første kolonnen - en halv fraksjon:

<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å

egenskapen grid,
som angir en forkortet notasjon for egenskaper for kolonner og rader
egenskapen grid-template-rows,
som angir antall og bredde på rader i et grid
egenskapen grid-template-columns,
som angir antall og bredde på kolonner i et grid