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

CSS minmax() συνάρτηση

Ορισμός και χρήση του CSS minmax() Η συνάρτηση χρησιμοποιείται για το CSS grid layout και ορίζει ένα εύρος μεγέθους που είναι μεγαλύτερο ή ίσο με το ελάχιστο και μικρότερο ή ίσο με το μέγιστο.

Παράδειγμα

Χρησιμοποιήστε minmax() Ορίστε το εύρος μεγέθους για τις στήλες του δίκτυου:

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

Δοκιμάστε το شخصικά

Γλώσσα CSS

minmax(min, max)
Τιμή Περιγραφή
min

Απαιτείται. Μικρότερη τιμή.

Μπορεί να είναι μήκος, ποσοστό, αξία ελαστικότητας (fr) ή ένα από τα παρακάτω κλειδιά:

  • auto
  • max-content
  • min-content
max

Απαιτείται. Μέγιστη τιμή.

Μπορεί να είναι μήκος, ποσοστό, αξία ελαστικότητας (fr) ή ένα από τα παρακάτω κλειδιά:

  • auto
  • max-content
  • min-content

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

Έκδοση: CSS Grid Layout Module Level 2

Υποστήριξη περιηγητή

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

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

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

Αναφορά:CSS συνάρτηση min()

Αναφορά:CSS συνάρτηση max()

Αναφορά:CSS grid-template-columns attribute

Αναφορά:CSS grid-template-rows attribute

Αναφορά:CSS grid-auto-columns attribute

Αναφορά:CSS grid-auto-rows attribute