Liczba i szerokość kolumn w siatkach CSS

Zapoznanie się z pracą w siatce zaczniemy od przypisania liczby i szerokości kolumn, wzdłuż których będą rozmieszczane elementy potomne. W tym celu użyjemy właściwości grid-template-columns, która jest określana w elemencie rodzicu i definiuje liczbę i szerokość kolumn, które będą zajmować elementy potomne w siatce. We wartości właściwości podajemy szerokość kolumn w pikselach.

Przykład

Najpierw utwórzmy element nadrzędny i uczynimy go kontenerem siatki. Załóżmy, że mamy div, w którym znajduje się cztery elementy potomne. Ustawmy dla niego we właściwości display wartość grid, a we właściwości grid-template-columns wpiszmy szerokość dla dwóch kolumn:

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

Przykład

Teraz utwórzmy tabelę z czterema kolumnami o różnych rozmiarach:

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

Zadania praktyczne

Załóżmy, że masz div z dziewięcioma elementami potomnymi. Uczyń element nadrzędny kontenerem siatki.

Umieść elementy potomne w dwóch kolumnach o szerokości 200px.

Umieść elementy potomne w trzech kolumnach o szerokości 150px.

Umieść elementy potomne w trzech kolumnach: pierwsza o szerokości 100px, druga 150px, a trzecia 200px.