Функцыя repeat у CSS грідах

Калі ў вас некалькі слупкоў, для якіх задаюцца аднолькавыя памеры, то можна спрасціць запіс, выкарыстаўшы функцыю repeat. У першым параметры гэтай функцыі паказваецца колькасць слупкоў, а ў другім - іх шырыня. Давайце паглядзім на прыкладах, як гэта працуе.

Прыклад

Хай у нас ёсць тры калонкі аднолькавага памеру:

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

Спрасцім запіс з дапамогай repeat:

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

Прыклад

Хай у нас ёсць тры калонкі аднолькавага памеру, а чацвёртая іншага памеру:

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

Спрасцім запіс з дапамогай repeat:

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

Прыклад

Хай у нас ёсць першыя тры калонкі аднаго памеру, а другія тры калонкі іншага памеру:

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

Спрасцім запіс з дапамогай repeat:

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

Прыклад

Хай у нас ёсць першыя тры калонкі аднаго памеру, потым яшчэ калонка, а потым яшчэ тры калонкі іншага памеру:

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

Спрасцім запіс з дапамогай repeat:

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

Прыклад

Спрашчэнне працуе для любых адзінак памераў. Хай для прыкладу ў нас ёсць тры калонкі ў пікселях:

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

Спрасцім запіс з дапамогай repeat:

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

Практычныя задачы