Kolonnu skaits un platums CSS režģos

Iepazīšanos ar darbu režģī mēs sāksim ar to, ka piešķirsim kolonnu skaitu un platumu, pa kuru tiks izvietoti pakārtotie elementi. Šim nolūkam mēs izmantosim īpašību grid-template-columns, kas tiek norādīta vecākelementā un nosaka kolonnu skaitu un platumu, ko ieņems pakārtotie elementi režģī. Īpašības vērtībā mēs norādām kolonnu platumu pikseļos.

Piemērs

Vispirms izveidosim vecākelementu un padarīsim to par režģa konteineri. Pieņemsim, ka mums ir div, kurā atrodas četri pakārtotie elementi. Noteiksim tam īpašībā display vērtību grid, un īpašībā grid-template-columns ierakstīsim platumu divām kolonnām:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Piemērs

Tagad izveidosim tabulu ar četrām dažāda izmēra kolonnām:

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

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Praktiskie uzdevumi

Pieņemsim, ka jums ir div ar deviņiem pakārtotiem elementiem. Padariet vecākelementu par režģa konteineri.

Izvietojiet pakārtotos elementus divās kolonnās ar platumu 200px.

Izvietojiet pakārtotos elementus trīs kolonnās ar platumu 150px.

Izvietojiet pakārtotos elementus trīs kolonnās: pirmā ar platumu 100px, otrā 150px, bet trešā 200px.