Die repeat-funksie in CSS-roosters

As jy verskeie kolomme het waaraan dieselfde groottes toegewys word, kan jy die skryfwerk vereenvoudig deur die funksie repeat te gebruik. Die eerste parameter van hierdie funksie spesifiseer die aantal kolomme, en die tweede - hul breedte. Kom ons kyk na voorbeelde hoe dit werk.

Voorbeeld

Gestel ons het drie kolomme van dieselfde grootte:

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

Vereenvoudig die skryfwerk met behulp van repeat:

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

Voorbeeld

Gestel ons het drie kolomme van dieselfde grootte, en 'n vierde kolom van 'n ander grootte:

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

Vereenvoudig die skryfwerk met behulp van repeat:

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

Voorbeeld

Gestel ons eerste drie kolomme is van een grootte, en die volgende drie kolomme is van 'n ander grootte:

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

Vereenvoudig die skryfwerk met behulp van repeat:

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

Voorbeeld

Gestel ons het eerste drie kolomme van een grootte, dan nog 'n kolom, en dan nog drie kolomme van 'n ander grootte:

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

Vereenvoudig die skryfwerk met behulp van repeat:

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

Voorbeeld

Vereenvoudiging werk vir enige eenhede van grootte. Gestel as voorbeeld ons het drie kolomme in pixels:

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

Vereenvoudig die skryfwerk met behulp van repeat:

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

Praktiese take