Repeat-funktionen i CSS-grid

Hvis du har flere kolonner, der skal have de samme størrelser, kan du forenkle notationen ved at bruge funktionen repeat. Den første parameter i denne funktion angiver antallet af kolonner, og den anden - deres bredde. Lad os se på eksempler, hvordan dette fungerer.

Eksempel

Lad os sige, at vi har tre kolonner af samme størrelse:

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

Forenkel notationen med repeat:

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

Eksempel

Lad os sige, at vi har tre kolonner af samme størrelse, og en fjerde kolonne af en anden størrelse:

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

Forenkel notationen med repeat:

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

Eksempel

Lad os sige, at de første tre kolonner har én størrelse, og de næste tre kolonner har en anden størrelse:

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

Forenkel notationen med repeat:

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

Eksempel

Lad os sige, at de første tre kolonner har én størrelse, derefter kommer der en kolonne mere, og derefter yderligere tre kolonner af en anden størrelse:

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

Forenkel notationen med repeat:

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

Eksempel

Forenklingen fungerer for alle enheder for størrelser. Lad os for eksempel sige, at vi har tre kolonner i pixels:

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

Forenkel notationen med repeat:

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

Praktiske opgaver