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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Uprośćmy zapis za pomocą repeat:
#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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Uprośćmy zapis za pomocą repeat:
#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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Uprośćmy zapis za pomocą repeat:
#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:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Uprośćmy zapis za pomocą repeat:
#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:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Uprośćmy zapis za pomocą repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Zadania praktyczne
Utwórz 4 kolumny o identycznym
rozmiarze za pomocą repeat.
Utwórz 4 kolumny o rozmiarze 100px,
a jeszcze 3 kolumny o rozmiarze 2fr.
Utwórz 2 kolumny o rozmiarze 100px,
jeszcze 3 kolumny o rozmiarze 200px,
potem kolumnę o rozmiarze 1fr,
i potem 2 kolumny
o rozmiarze 10%.
