Aantal en breedte van kolomme in CSS-roosters

Ons sal met roosterwerk begin deur die aantal en breedte van die kolomme aan te wys waarin die kindelemente geplaas sal word. Vir hierdie doel gebruik ons die eienskap grid-template-columns, wat gespesifiseer word in die ouerelement en bepaal die aantal en breedte van die kolomme wat die afstammelingelemente in die rooster sal inneem. In die waarde van die eienskap spesifiseer ons die kolombreedtes in pixels.

Voorbeeld

Laat ons eers 'n ouerelement skep en dit 'n roosterhouer maak. Kom ons sê ons het 'n div met vier kindelemente daarin. Laat ons daarvoor in die eienskap display die waarde grid stel, en in die eienskap grid-template-columns die breedte vir twee kolomme skryf:

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

Voorbeeld

Kom ons skep nou 'n tabel met vier kolomme van verskillende groottes:

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

Praktiese take

Kom ons sê jy het 'n div met nege kind- elemente. Maak die ouerelement 'n roosterhouer.

Plaas die kindelemente in twee kolomme met 'n breedte van 200px.

Plaas die kindelemente in drie kolomme met 'n breedte van 150px.

Plaas die kindelemente in drie kolomme: die eerste met 'n breedte van 100px, die tweede 150px, en die derde 200px.