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

Практични задаци