Funkcja repeat w siatkach CSS

Jeśli masz kilka kolumn, dla których określane są identyczne rozmiary, możesz uprościć zapis, używając funkcji repeat. W pierwszym parametrze tej funkcji określa się liczbę kolumn, a w drugim - ich szerokość. Spójrzmy na przykładach, jak to działa.

Przykład

Załóżmy, że mamy trzy kolumny o identycznym rozmiarze:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Uprośćmy zapis za pomocą repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Przykład

Załóżmy, że mamy trzy kolumny o identycznym rozmiarze, a czwarta o innym rozmiarze:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr;
}

Uprośćmy zapis za pomocą repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 2fr;
}

Przykład

Załóżmy, że mamy pierwsze trzy kolumny o jednym rozmiarze, a drugie trzy kolumny o innym rozmiarze:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}

Uprośćmy zapis za pomocą repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}

Przykład

Załóżmy, że mamy pierwsze trzy kolumny o jednym rozmiarze, potem jeszcze kolumnę, a potem jeszcze trzy kolumny o innym rozmiarze:

css#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}

Uprośćmy zapis za pomocą repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}

Przykład

Uproszczenie działa dla dowolnych jednostek rozmiarów. Załóżmy dla przykładu, że mamy trzy kolumny w pikselach:

css#parent {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Uprośćmy zapis za pomocą repeat:

css#parent {
  display: grid;
  grid-template-columns: repeat(3, 200px);
}

Zadania praktyczne