Funktsioon repeat CSS grid'ides

Kui teil on mitu veergu, millele on määratud samad suurused, siis saab kirjet lihtsustada, kasutades funktsiooni repeat. Selle funktsiooni esimeses parameetris määratakse veergude arv ja teises - nende laius. Vaatame näidete varal, kuidas see töötab.

Näide

Oletame, et meil on kolm sama suurusega veergu:

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

Lihtsustame kirjet kasutades repeat:

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

Näide

Oletame, et meil on kolm sama suurusega veergu, kuid neljas on teistsuguse suurusega:

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

Lihtsustame kirjet kasutades repeat:

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

Näide

Oletame, et meil on esimesed kolm veergu ühte suuruses, kuid teised kolm veergu on teises suuruses:

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

Lihtsustame kirjet kasutades repeat:

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

Näide

Oletame, et meil on esimesed kolm veergu ühte suuruses, siis veel üks veerg, ja siis veel kolm veergu teises suuruses:

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

Lihtsustame kirjet kasutades repeat:

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

Näide

Lihtsustamine töötab kõikide mõõtühikute puhul. Oletame näiteks, et meil on kolm veergu pikslites:

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

Lihtsustame kirjet kasutades repeat:

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

Praktilised ülesanded