Διάταξη πλέγματος CSS Τρόπος χρήσης του minmax ()
ο Μονάδα διαμόρφωσης πλέγματος CSS παίρνει ευαίσθητη σχεδίαση στο επόμενο επίπεδο εισάγοντας ένα νέο είδος ευελιξίας που δεν είχε δει ποτέ πριν. Τώρα, μπορούμε όχι μόνο ορίστε προσαρμοσμένα πλέγματα απίστευτα γρήγορα μόνο με καθαρό CSS, αλλά το CSS Grid έχει επίσης Πολλοί κρυμμένοι πολύτιμοι λίθοι που μας επιτρέπουν να βελτιώσουμε περαιτέρω το δίκτυο και να επιτύχουμε πολύπλοκες διατάξεις.
ο minmax () λειτουργία είναι ένα από αυτά τα λιγότερο γνωστά χαρακτηριστικά. Καθορίζει το μέγεθος ενός κομματιού πλέγματος ως ελάχιστο σε μέγιστο εύρος τιμών έτσι ώστε το πλέγμα να μπορεί να προσαρμοστεί στο θέαμα του κάθε χρήστη με τον καλύτερο δυνατό τρόπο.
Σύνταξη
Η σύνταξη του minmax () λειτουργία είναι σχετικά απλή, παίρνει δύο επιχειρήματα: ελάχιστη και μέγιστη τιμή:
minmax (λεπτά, μέγιστο)
ο min αξία πρέπει να είναι μικρότερη από το Μέγιστη, σε διαφορετική περίπτωση Μέγιστη αγνοείται από το πρόγραμμα περιήγησης.
Μπορούμε να χρησιμοποιήσουμε το minmax () λειτουργία ως αξία του πλέγμα-πρότυπο-στήλες ή πλέγμα-πρότυπο-σειρές ιδιοκτησία (ή και τα δύο). Στο παράδειγμά μας, θα χρησιμοποιήσουμε το πρώτο, καθώς πρόκειται για μια πολύ συχνότερη περίπτωση χρήσης.
.δοχείο εμφάνιση: πλέγμα; πλέγμα-πρότυπο-στήλες: minmax (100px, 200px) 1fr 1fr; πλέγμα-πρότυπο-σειρές: 100px 100px 100px; πλέγμα-διάκενο: 10px;
Στο demo του Codepen παρακάτω, μπορείτε να βρείτε το HTML και CSS κώδικα θα χρησιμοποιήσουμε σε όλο το άρθρο.
Μπορούμε να χρησιμοποιήσουμε διαφορετικά είδη αξιών μεσα στην minmax () όλα εξαρτώνται από το είδος του προσαρμοσμένου πλέγματος που θέλουμε να δημιουργήσουμε.
Στατικές τιμές μήκους
Υπάρχουν δύο βασικοί τρόποι με τους οποίους μπορούμε να χρησιμοποιήσουμε το minmax () λειτουργία με Στατικές τιμές μήκους.
Πρώτον, μπορούμε να χρησιμοποιήσουμε minmax () μόνο για μία στήλη πλέγματος και ορίστε το πλάτος των άλλων στηλών ως απλές στατικές τιμές (εικονοστοιχεία εδώ).
πλέγμα-πρότυπο-στήλες: minmax (100px, 200px) 200px 200px;
Στο παρακάτω demo μπορείτε να δείτε ότι αυτή η διάταξη είναι δεν ανταποκρίνεται, Ωστόσο, η πρώτη στήλη έχει κάποια ευελιξία. Η δεύτερη και η τρίτη στήλη διατηρούν σταθερό πλάτος (200px) ενώ η πρώτη στήλη κυμαίνεται από 100px σε 200px, με βάση τον διαθέσιμο χώρο.
Δεύτερον, μπορούμε να ορίσουμε το πλάτος του περισσότερες από μία στήλες πλέγματος χρησιμοποιώντας minmax (). Οι τιμές min και max είναι και οι δύο στατικές, οπότε από προεπιλογή είναι το πλέγμα δεν ανταποκρίνεται. Ωστόσο, οι ίδιες οι στήλες είναι εύκαμπτος, αλλά μόνο μεταξύ 100px και 200px. Αυτοί να αναπτυχθούν και να συρρικνωθούν ταυτόχρονα καθώς αλλάζουμε το μέγεθος του παραθύρου προβολής.
πλέγμα-πρότυπο-στήλες: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px);
Σημειώστε ότι μπορούμε επίσης Χρησιμοποιήστε το επαναλαμβάνω() λειτουργία μαζί με minmax (). Έτσι, το προηγούμενο απόσπασμα κώδικα μπορεί επίσης να γραφτεί έτσι:
πλέγμα-πρότυπο-στήλες: επανάληψη (3, minmax (100px, 200px));
Δυναμικές τιμές μήκους
Εκτός από τις στατικές τιμές, το minmax () λειτουργία δέχεται επίσης ποσοστιαίες μονάδες και το νέα μονάδα κλάσματος (fr) ως επιχειρήματα. Με τη χρήση τους, μπορούμε να επιτύχουμε προσαρμοσμένα πλέγματα και τα δύο αποκριτικός και να αλλάξουν τις διαστάσεις τους ανάλογα με τον διαθέσιμο χώρο.
Ο παρακάτω κώδικας καταλήγει σε ένα πλέγμα στο οποίο το πλάτος της πρώτης στήλης κυμαίνεται μεταξύ 50% και 80% ενώ το δεύτερο και το τρίτο κατανέμουν ομοιόμορφα το υπόλοιπο χώρο.
πλέγμα-πρότυπο-στήλες: minmax (50%, 80%) 1fr 1fr;
Όταν χρησιμοποιούμε δυναμικές τιμές με το minmax () είναι σημαντικό να δημιουργήσετε ένα κανόνα που έχει νόημα. Επιτρέψτε μου να σας δείξω ένα παράδειγμα όπου το το πλέγμα καταρρέει:
πλέγμα-πρότυπο-στήλες: minmax (1fr, 2fr) 1fr 1fr;
Αυτός ο κανόνας δεν έχει νόημα, όπως είναι το πρόγραμμα περιήγησης αδυνατεί να αποφασίσει που αξίζει να εκχωρήσετε στο minmax () λειτουργία. Η ελάχιστη τιμή θα οδηγούσε σε a 1fr 1fr 1fr το πλάτος της στήλης, ενώ το μέγιστο 2fr 1fr 1fr. Αλλά, και οι δύο είναι δυνατές ακόμη και σε μια πολύ μικρή οθόνη. Υπάρχει τίποτα που δεν μπορεί να σχετίζεται με το πρόγραμμα περιήγησης.
Εδώ είναι το αποτέλεσμα:
Συνδυάστε τις στατικές και δυναμικές τιμές
Είναι επίσης δυνατό να συνδυάζουν τις στατικές και δυναμικές τιμές. Για παράδειγμα, στο demo του Codepen παραπάνω, χρησιμοποίησα το minmax (100px, 200px) 1fr 1fr; κανόνας που οδηγεί σε ένα πλέγμα όπου βρίσκεται η πρώτη στήλη κυμαίνεται μεταξύ 100px και 200px και ο υπόλοιπος χώρος είναι ομοιόμορφα κατανεμημένος μεταξύ των άλλων δύο.
πλέγμα-πρότυπο-στήλες: minmax (100px, 200px) 1fr 1fr;
Είναι ενδιαφέρον να παρατηρήσουμε ότι καθώς μεγαλώνει η προβολή, πρώτα, η πρώτη στήλη αυξάνεται από 100px σε 200px. Οι άλλοι δύο, που κυριαρχούνται από τη μονάδα fr, αρχίζουν να μεγαλώνουν μόνο αφού η πρώτη φθάσει στο μέγιστο πλάτος της. Αυτό είναι λογικό, καθώς ο στόχος της μονάδας κλάσματος είναι να διαιρέσει τον διαθέσιμο (υπόλοιπο) χώρο.
ο min-περιεχομένου, μέγιστο περιεχόμενο, και αυτο λέξεις-κλειδιά
Υπάρχει μια τρίτο είδος αξίας μπορούμε να αναθέσουμε στο minmax () λειτουργία. ο min-περιεχομένου, μέγιστο περιεχόμενο, και αυτο οι λέξεις-κλειδιά αφορούν τις διαστάσεις μιας διαδρομής πλέγματος στο περιεχόμενο που περιέχει.
μέγιστο περιεχόμενο
ο μέγιστο περιεχόμενο λέξη-κλειδί κατευθύνει το πρόγραμμα περιήγησης που χρειάζεται η στήλη πλέγματος όσο το ευρύτερο στοιχείο που περιέχει.
Στο demo παρακάτω, έβαλα ένα 400px-wide image μέσα στο πρώτο κομμάτι πλέγματος και χρησιμοποίησε τον ακόλουθο κανόνα CSS (μπορείτε να βρείτε ένα demo του Codepen με τον πλήρη τροποποιημένο κώδικα στο τέλος του άρθρου):
.δοχείο πλέγμα-πρότυπο-στήλες: max-content 1fr 1fr; / ** * Το ίδιο με τη μνεία minmax (): * grid-template-columns: minmax (μέγιστο περιεχόμενο, μέγιστο περιεχόμενο) 1fr 1fr; * /
Δεν έχω χρησιμοποιήσει minmax () αλλά στο σχόλιο κώδικα παραπάνω μπορείτε να δείτε πώς θα φαίνεται ο ίδιος κώδικας με αυτό (αν και είναι περιττό εδώ).
Όπως μπορείτε να δείτε, η πρώτη στήλη πλέγματος είναι τόσο ευρεία όσο το ευρύτερο στοιχείο της (εδώ η εικόνα). Με αυτόν τον τρόπο, οι χρήστες μπορούν πάντα να δουν την εικόνα σε πλήρες μέγεθος. Ωστόσο, κάτω από ένα συγκεκριμένο μέγεθος παραθύρου προβολής, αυτή η διάταξη είναι δεν ανταποκρίνεται.
min-περιεχομένου
ο min-περιεχομένου λέξη-κλειδί κατευθύνει το πρόγραμμα περιήγησης ότι η στήλη πλέγματος πρέπει να είναι τόσο μεγάλη όσο η στενότερο στοιχείο που περιέχει, με τέτοιο τρόπο ώστε δεν οδηγεί σε υπερχείλιση.
Ας δούμε πώς μοιάζει η προηγούμενη επίδειξη με την εικόνα αν αλλάξουμε την τιμή της πρώτης στήλης σε min-περιεχομένου:
.δοχείο πλέγμα-πρότυπο-στήλες: min-content 1fr 1fr; / ** * Το ίδιο με τη μνεία minmax (): * grid-template-columns: minmax (min-content, min-content) 1fr 1fr; * /
Άφησα το πράσινο φόντο κάτω από την εικόνα, ώστε να μπορείτε να δείτε το πλήρες μέγεθος του πρώτου κελιού πλέγματος.
Όπως μπορείτε να δείτε, η πρώτη στήλη διατηρεί το μικρότερο πλάτος μπορεί να επιτευχθεί χωρίς υπερχείλιση. Σε αυτό το παράδειγμα, αυτό θα οριστεί από το ελάχιστο πλάτος του 4ου και 7ου πλέγματος, το οποίο προέρχεται από το υλικό παραγεμίσματος και μέγεθος γραμματοσειράς ιδιότητες, όπως η εικόνα στο πρώτο κελί θα μπορούσε να συρρικνωθεί στο μηδέν χωρίς υπερχείλιση.
Εάν η κελιά του δικτύου περιείχε μια συμβολοσειρά κειμένου, min-περιεχομένου επιθυμών να είναι ίσο με το πλάτος της μακρύτερης λέξης, καθώς αυτό είναι το μικρότερο στοιχείο που δεν μπορεί να συρρικνωθεί περαιτέρω χωρίς υπερχείλιση. Εδώ είναι ένα μεγάλο άρθρο από BitsOfCode όπου μπορείτε να δείτε πώς min-περιεχομένου και μέγιστο περιεχόμενο συμπεριφέρονται όταν το κελί του δικτύου περιέχει μια συμβολοσειρά κειμένου.
Χρησιμοποιώντας min-περιεχομένου και μέγιστο περιεχόμενο μαζί
Αν εμείς χρήση min-περιεχομένου και μέγιστο περιεχόμενο μαζί μεσα στην minmax () Λειτουργία έχουμε μια στήλη πλέγματος που:
- ανταποκρίνεται
- δεν έχει υπερχείλιση
- δεν αναπτύσσεται ευρύτερα από το ευρύτερο στοιχείο του
.δοχείο πλέγμα-πρότυπο-στήλες: minmax (ελάχιστο περιεχόμενο, μέγιστο περιεχόμενο) 1fr 1fr;
Μπορούμε επίσης να χρησιμοποιήσουμε το min-περιεχομένου και μέγιστο περιεχόμενο λέξεις-κλειδιά μαζί με άλλες τιμές μήκους μεσα στην minmax () μέχρις ότου ο κανόνας έχει νόημα. Για παράδειγμα, minmax (25%, μέγιστο περιεχόμενο) ή minmax (ελάχιστο περιεχόμενο, 300px) θα ήταν και οι δύο έγκυροι κανόνες.
αυτο
Τέλος, μπορούμε επίσης να χρησιμοποιήσουμε το αυτο λέξη-κλειδί ως επιχείρημα του minmax () λειτουργία.
Πότε αυτο είναι χρησιμοποιείται ως μέγιστο, η αξία του είναι ίδια με μέγιστο περιεχόμενο.
Πότε είναι χρησιμοποιείται ως ελάχιστο, η αξία του προσδιορίζεται από το min-πλάτος / λεπτό-ύψος κανόνας, πράγμα που σημαίνει ότι αυτο είναι μερικές φορές ταυτόσημη με min-περιεχομένου, αλλά δεν είναι πάντα.
Στο προηγούμενο παράδειγμα μας, min-περιεχομένου ισούται με αυτο, καθώς το ελάχιστο πλάτος της πρώτης στήλης πλέγματος είναι πάντοτε μικρότερο από το ελάχιστο ύψος. Έτσι, ο κανόνας CSS που ανήκει:
.δοχείο πλέγμα-πρότυπο-στήλες: minmax (ελάχιστο περιεχόμενο, μέγιστο περιεχόμενο) 1fr 1fr;
θα μπορούσε επίσης να γραφτεί έτσι:
.δοχείο πλέγμα-πρότυπο-στήλες: minmax (αυτόματη, αυτόματη) 1fr 1fr;
ο αυτο η λέξη-κλειδί μπορεί επίσης να είναι που χρησιμοποιούνται μαζί με άλλες στατικές και δυναμικές μονάδες (pixels, fr μονάδα, ποσοστά, κλπ.) μέσα στο minmax () για παράδειγμα minmax (αυτόματη, 300px) θα ήταν ένας έγκυρος κανόνας.
Μπορείτε να δοκιμάσετε πώς το min-περιεχομένου, μέγιστο περιεχόμενο, και αυτο οι λέξεις-κλειδιά συνεργάζονται με το minmax () λειτουργία στο ακόλουθο demo του Codepen:
