Функция 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);
}

Практически задачи