Funksjonen repeat i CSS-grid

Hvis du har flere kolonner, som har samme størrelser, kan du forenkle oppføringen ved å bruke funksjonen repeat. I den første parameteren til denne funksjonen spesifiseres antall kolonner, og i den andre - deres bredde. La oss se på eksempler, hvordan dette fungerer.

Eksempel

La oss si at vi har tre kolonner med samme størrelse:

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

Forenkle oppføringen med repeat:

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

Eksempel

La oss si at vi har tre kolonner med samme størrelse, og en fjerde med en annen størrelse:

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

Forenkle oppføringen med repeat:

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

Eksempel

La oss si at de første tre kolonnene har en størrelse, og de neste tre kolonnene har en annen størrelse:

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

Forenkle oppføringen med repeat:

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

Eksempel

La oss si at vi har de første tre kolonnene med en størrelse, deretter en kolonne til, og deretter tre kolonner med en annen størrelse:

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

Forenkle oppføringen med repeat:

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

Eksempel

Forenklingen fungerer for alle enheter for størrelser. La oss for eksempel si at vi har tre kolonner i piksler:

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

Forenkle oppføringen med repeat:

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

Praktiske oppgaver