Функцыя repeat у CSS грідах
Калі ў вас некалькі слупкоў,
для якіх задаюцца аднолькавыя памеры,
то можна спрасціць запіс, выкарыстаўшы
функцыю repeat.
У першым параметры гэтай функцыі паказваецца
колькасць слупкоў, а ў другім - іх шырыня.
Давайце паглядзім на прыкладах,
як гэта працуе.
Прыклад
Хай у нас ёсць тры калонкі аднолькавага памеру:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Спрасцім запіс з дапамогай repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Прыклад
Хай у нас ёсць тры калонкі аднолькавага памеру, а чацвёртая іншага памеру:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Спрасцім запіс з дапамогай repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Прыклад
Хай у нас ёсць першыя тры калонкі аднаго памеру, а другія тры калонкі іншага памеру:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Спрасцім запіс з дапамогай repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Прыклад
Хай у нас ёсць першыя тры калонкі аднаго памеру, потым яшчэ калонка, а потым яшчэ тры калонкі іншага памеру:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Спрасцім запіс з дапамогай repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Прыклад
Спрашчэнне працуе для любых адзінак памераў. Хай для прыкладу ў нас ёсць тры калонкі ў пікселях:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Спрасцім запіс з дапамогай repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Практычныя задачы
Зрабіце 4 слупкі аднолькавага
памеру з дапамогай repeat.
Зрабіце 4 слупкі памерам 100px,
а яшчэ 3 слупкі памерам 2fr.
Зрабіце 2 слупкі памерам 100px,
яшчэ 3 слупкі памерам 200px,
потым слупок памерам 1fr,
і потым 2 слупкі
памерам 10%.
