Īpašība grid

Īpašība grid ir saīsināta forma visām režģa konteinera kolonnu un rindu īpašībām. Visas vērtības tiek ierakstītas vienā rindā, atdalītas ar slīpsvītru.

Ar grid vienā rindā var aprakstīt tikai viena veida īpašības - eksplicītās (grid-template-rows, grid-template-columns, grid-template-areas) vai implicītās (grid-auto-rows, grid-auto-columns, grid-auto-flow). Tās īpašības, kuras netika norādītas, iegūst noklusējuma vērtības.

Sintakse

elements {
	grid: režģa īpašības;
}

Piemērs

Izveidosim tabulu ar grid īpašības palīdzību:

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

Piemērs

Tagad piešķirsim otrajai un trešajai rindai vienādu platumu, un katrai kolonnai - atšķirīgu platumu:

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

Piemērs

Tagad tabulā no iepriekšējā piemēra izveidosim augšējo rindu ar platumu divās frakcijās, un pirmo kolonnu - pusei frakcijas:

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

Skatiet arī

īpašība grid-template,
kura iestata kolonnu un rindu skaitu un platumu elementam
īpašība grid-template-rows,
kura iestata rindu skaitu un platumu režģī
īpašība grid-template-columns,
kura iestata kolonnu skaitu un platumu režģī
īpašība grid-template-areas,
kura iestata elementu izvietojumu režģī
īpašība grid-auto-flow,
kura iestata elementu automātisko izvietojumu režģī