Funksioni repeat në CSS Grid

Nëse keni disa kolona, për të cilat caktohen dimensione të njëjta, atëherë mund ta thjeshtoni shënimin duke përdorur funksionin repeat. Në parametrin e parë të këtij funksioni specifikohet numri i kolonave, dhe në të dytin - gjerësia e tyre. Le të shohim me shembuj, si funksionon kjo.

Shembull

Le të themi se kemi tre kolona me të njëjtin madhësi:

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

Le ta thjeshtojmë shënimin duke përdorur repeat:

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

Shembull

Le të themi se kemi tre kolona me të njëjtin madhësi, dhe e katërta me madhësi tjetër:

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

Le ta thjeshtojmë shënimin duke përdorur repeat:

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

Shembull

Le të themi se tre kolonat e para kanë një madhësi, dhe tre kolonat e dyta kanë madhësi tjetër:

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

Le ta thjeshtojmë shënimin duke përdorur repeat:

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

Shembull

Le të themi se tre kolonat e para kanë një madhësi, pastaj një kolonë tjetër, dhe pastaj tre kolona të tjera me madhësi tjetër:

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

Le ta thjeshtojmë shënimin duke përdorur repeat:

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

Shembull

Thjeshtimi funksionon për çdo njësi madhesie. Le të themi për shembull se kemi tre kolona në piksel:

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

Le ta thjeshtojmë shënimin duke përdorur repeat:

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

Detyra praktike