Właściwość grid-template

Właściwość grid-template określa liczbę i szerokość wierszy i kolumn, które element będzie zajmował w siatce i jest skróconą formą właściwości grid-template-rows oraz grid-template-columns. Wiersze i kolumny, na których zostanie umieszczony element, są wskazane przez ukośnik. Właściwość grid-template jest ustawiana w elemencie-rodzicu i określa położenie elementów-dzieci. W wartości właściwości podajemy szerokość wierszy lub kolumn w dowolnych jednostkach dla rozmiarów.

Przy podawaniu wartości w pikselach we właściwościach rozmiary elementów będą dokładnie im odpowiadać. Jeśli podamy słowo auto, to kolumny i wiersze będą zajmować całą dostępną przestrzeń. Użycie jednostki fr (frakcja) oznacza, że cała przestrzeń zostanie podzielona na równe części. Zaletą fr jest jej adaptacyjność do różnych kontenerów lub rozdzielczości ekranu, ponieważ fr po prostu dzieli je na wskazaną liczbę frakcji bez przywiązania do dokładnego rozmiaru w pikselach.

Składnia

cssselektor {
  grid-template: szerokość i liczba wierszy / szerokość i liczba kolumn;
}

Przykład

Stwórzmy za pomocą właściwości grid-template tabelę:

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>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Przykład

A teraz ustawmy drugiemu i trzeciemu wierszowi tę samą szerokość, a każdej kolumnie - różną szerokość:

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>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 60px 1fr 60px / 20% 1fr 15%;
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 300px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Przykład

A teraz w tabeli z poprzedniego przykładu zróbmy górny wiersz o szerokości dwóch frakcji, a pierwszą kolumnę - o połowie frakcji:

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>9</div>
</div>

css#parent {
  display: grid;
  grid-template: 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;
}

Результат:

Zobacz też