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:

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

css#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:

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

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