Προτεινόμενη διαδραστική μάθηση:

Συνάρτηση repeat() CSS

Ορισμός και χρήση repeat() CSS

Συνάρτηση χρησιμοποιείται για την επανάληψη ενός συνόλου στηλών ή γραμμών στο δίκτυο.

Αυτή η συνάρτηση είναι χρήσιμη αν στο δίκτυό σας υπάρχουν πολλά γραμμές ή στήλες. Με αυτή τη συνάρτηση, μπορείτε να δημιουργήσετε ένα "παράδειγμα επαναλήψεως" για χρήση. grid-template-columns Attribute και grid-template-rows Χρησιμοποιώντας τα αtribute μαζί.

Επίδειξη

Παράδειγμα 1

Χρησιμοποιώντας repeat() Επανάληψη ενός συνόλου στηλών στο δίκτυο:

#container {
  display: grid;
  grid-template-columns: repeat(2, 60px 1fr);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Δοκιμάστε το προσωπικά

Παράδειγμα 2

Χρησιμοποιώντας repeat() Επανάληψη ενός συνόλου στηλών στο δίκτυο:

#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}

Δοκιμάστε το προσωπικά

Γλωσσάρα CSS

repeat(repeat-count, tracks)
Τιμή Περιγραφή
repeat-counts

Απαιτείται. Ορίζει τον αριθμό των επαναλήψεων των στηλών ή των γραμμών.

Μπορεί να είναι 1 ή μεγαλύτερο ολόκληρο αριθμό, ή τα κλειδιά auto-fill ή auto-fit (τα οποία επαναλαμβάνουν τις στήλες/γραμμές ανάλογα με τις ανάγκες για να γεμίσουν τον κουτί δίκτυου).
tracks

Απαιτείται. Ορίζει τις επαναλαμβανόμενες στήλες ή τις ομάδες γραμμών. Μπορεί να χρησιμοποιηθούν οι εξής τιμές:

  • Αξίες μήκους (px, em, %, fr, ch)
  • min-content
  • max-content
  • auto
  • minmax()
  • fit-content()
  • Όνομα γραμμής

Τεχνικά λεπτομέρειες

Έκδοση: CSS Γραμμικό Σχεδιασμό Μοντέλο 2

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στην τάβλη δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Χρωμέι Εντζ Φαξφρέξ Σαφάρι Όπερα
57 16 76 10.1 44

Σχετικές σελίδες

Αναφορά:CSS grid-template-columns ιδιότητα

Αναφορά:CSS grid-template-rows ιδιότητα