Βεβαιωθείτε ότι οι διατάξεις σας ανταποκρίνονται πλήρως με μια εναλλακτική μονάδα μέτρησης.

Πριν από λίγο καιρό, βασιστήκαμε πλήρως στη χρήση ποσοστών για πλάτη και ύψη. Η χρήση ποσοστών σήμαινε ότι η διάταξη και τα στοιχεία σας θα μπορούσαν να λάβουν ύψος και πλάτος με βάση τη θύρα προβολής. Αλλά καθώς το σύγχρονο CSS συνεχίζει να εξελίσσεται, φτάσαμε σε ένα σημείο όπου ίσως θα ήταν καλή ιδέα να αποφύγουμε τη χρήση ποσοστών.

Μάθετε για τα κοινά προβλήματα που θα αντιμετωπίσετε όταν χρησιμοποιείτε ποσοστά. Μάθετε επίσης για τις σύγχρονες τεχνικές CSS που πρέπει να χρησιμοποιήσετε αντί των ποσοστών. Αυτές οι τεχνικές θα σας δώσουν το ίδιο αποτέλεσμα με ποσοστά χωρίς κανένα από τα μειονεκτήματα.

Ένα πολύ απλό παράδειγμα πλέγματος

Για να δείξετε ένα πρόβλημα με ποσοστιαίες μονάδες, εξετάστε αυτήν τη διάταξη HTML:

<divτάξη="δοχείοτο πλέγμα μου">
 <divτάξη="πλέγμα-στοιχείο">
div>
 <divτάξη="πλέγμα-στοιχείο">
div>
div>

Το εξωτερικό στοιχείο είναι βασικό div στοιχείο δοχείου με δύο div παιδιά. Κάθε παιδί έχει ένα

instagram viewer
πλέγμα-στοιχείο τάξη. Για να μετατρέψουμε το κοντέινερ σε πλέγμα με δύο στήλες (δύο πλαίσια), θα χρειαστεί να εφαρμόσουμε τον ακόλουθο κώδικα CSS:

σώμα {
χρώμα του φόντου: μαύρος;
στοίχιση-στοιχεία: κέντρο;
δικαιολογώ-περιεχόμενο: flex-start;
}
.μου-πλέγμα {
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: 50% 50%;
περιθώριο: 3rem;
σύνορο: 2pxστερεόςχρυσός;
υλικό παραγεμίσματος: 1rem;
}
.πλέγμα-αντικείμενο {
σύνορο: 3pxστερεόςχρυσός;
υλικό παραγεμίσματος: 10rem 0;
Ιστορικό: μπλε;
}

Έτσι, κάθε στήλη (στοιχείο πλέγματος) έχει ένα χρώμα φόντου χρυσό. Στη γονική κλάση κοντέινερ, ορίσαμε πλέγμα-πρότυπο-στήλη έως 50% για κάθε στήλη. Ως αποτέλεσμα, και τα δύο κουτιά καταλαμβάνουν το 50% του συνολικού πλάτους του στοιχείου δοχείου.

Ιδού το αποτέλεσμα:

Υπάρχουν όμως προβλήματα με αυτή την ευθυγράμμιση. Πρώτον, εάν αποφασίσατε να προσθέσετε ένα χάσμα στον γονέα του πλέγματος, το παιδί θα μπορούσε να ξεχειλίσει από το πλάι. Για παράδειγμα, αν ήταν να προσθέσετε κενό: 3px στο .μου-πλέγμα μπλοκ στο CSS, τότε ορίστε πώς θα φαίνεται η διάταξη:

Όπως μπορείτε να δείτε στην παραπάνω εικόνα, το δεξί πλαίσιο έχει μετακινηθεί από το κοντέινερ. Μερικές φορές μπορεί να μην το παρατηρήσετε επειδή το κενό σας είναι αρκετά μικρό, με αποτέλεσμα ένα περίεργο πρόβλημα ευθυγράμμισης. Αλλά αν είχατε μεγαλύτερο κενό, τότε η επικάλυψη γίνεται αρκετά εμφανής.

Κάθε φορά που χρησιμοποιείτε ποσοστά και προσθέτετε περιθώρια ή κενά, υπάρχει μεγάλη πιθανότητα να αντιμετωπίσετε τέτοιου είδους σφάλματα. Γιατί όμως συμβαίνει το σφάλμα;

Είναι επειδή κάθε στήλη είναι το 50% του γονέα. Στο παραπάνω παράδειγμα, έχουμε 50% συν 50% συν αυτό το κενό (3 εικονοστοιχεία), το οποίο σπρώχνει το κουτί έξω από το δοχείο.

Σημειώστε ότι αυτό το σφάλμα δεν συμβαίνει μόνο με 50-50. Μπορείτε να ορίσετε την πρώτη στήλη σε 75%, τη δεύτερη στήλη σε 25% και το σφάλμα θα εξακολουθεί να εμφανίζεται. Αυτός είναι ο λόγος για τον οποίο πρέπει να χρησιμοποιείτε την παρακάτω λύση πιο συχνά.

Η λύση με τις κλασματικές τιμές

Η λύση είναι η χρήση κλασματικών τιμών αντί για ποσοστά. Έτσι, αντί να ορίσετε την πρώτη στήλη στο 75% και τη δεύτερη στο 50%, μπορείτε να ορίσετε την πρώτη στήλη σε 3fr και τη δεύτερη στήλη σε 1fr:

πλέγμα-πρότυπο-στήλες: 3fr 1fr

Αυτό διατηρεί την ίδια αναλογία με το πρώτο παράδειγμα. Αλλά το πλεονέκτημα της χρήσης fr μονάδες είναι ότι χρησιμοποιούν ένα κλάσμα του διαθέσιμου χώρου. Σε αυτήν την περίπτωση, η πρώτη στήλη θα πάρει τρία μέρη του χώρου ενώ η δεύτερη στήλη θα πάρει ένα μέρος, χωρίς να περιλαμβάνεται το κενό.

Ένα άλλο πλεονέκτημα της χρήσης frs σε σχέση με τα ποσοστά—ή άλλο απόλυτες μονάδες, όπως px ή em— είναι ότι μπορείτε να τα συνδυάσετε με σταθερές τιμές. Εδώ είναι ένα παράδειγμα:

πλέγμα-πρότυπο-στήλες: 1fr 10rem;

Με τον παραπάνω κωδικό, θα λάβετε μια σταθερή τιμή που δεν αλλάζει ποτέ ανεξάρτητα από το μέγεθος της οθόνης. Αυτό συμβαίνει γιατί η στήλη στα δεξιά θα παραμένει πάντα στα 10 rem ενώ η στήλη στα αριστερά θα καταλαμβάνει τον υπόλοιπο χώρο (μείον το κενό).

Μερικές φορές μπορείτε να ξεφύγετε χρησιμοποιώντας ποσοστά. Αλλά πρέπει να τα χρησιμοποιήσετε με έξυπνους τρόπους που μπορούν ακόμα να προσαρμοστούν στην κατάσταση. Συχνά, αυτό σημαίνει ότι τα συνδυάζετε με ένα fr αξία.

Ένα πιο ρεαλιστικό παράδειγμα

Ας φανταστούμε ότι έχετε μια σελίδα που περιλαμβάνει την κύρια περιοχή περιεχομένου και μια άκρη (για σχετικές αναρτήσεις). Η κύρια περιοχή περιεχομένου καταλαμβάνει τρία κλάσματα της οθόνης ενώ η πλαϊνή περιοχή καταλαμβάνει τον υπόλοιπο χώρο μείον το κενό:

.δοχείο {
πλάτος: 100%;
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: 3fr 1fr;
χάσμα: 1.5 εκμ;
}
.κάρτα {
χρώμα του φόντου: #5A5A5A;
υλικό παραγεμίσματος: 10px;
περιθώριο-κάτω: .5 εκμ;
}

Ιδού το αποτέλεσμα:

Συνήθως, μετακινείτε την πλαϊνή γραμμή (ή στην άκρη) στο κάτω μέρος (ή στην κορυφή) της σελίδας μόλις η οθόνη γίνει πολύ στενή. Αυτό σημαίνει τη ρύθμιση ερωτημάτων πολυμέσων που στοιβάζουν τα πάντα το ένα πάνω στο άλλο όταν η θύρα προβολής φτάσει σε ένα συγκεκριμένο σημείο διακοπής.

Δείτε πώς μπορείτε να στοιβάζετε τα πάντα σε μια στήλη όταν η θύρα προβολής φτάσει τα 55 em ή λιγότερο:

@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(μέγιστο πλάτος: 55 εκ) {
.δοχείο {
απεικόνιση: καλώδιο;
flex-direction: στήλη;
 }
}

Και το αποτέλεσμα θα μοιάζει κάπως έτσι:

Τώρα δεν θέλετε κάθε κάρτα να καλύπτει το πλάτος ολόκληρης της θύρας προβολής. Μάλλον οι κάρτες θα πρέπει να εμφανίζονται δίπλα-δίπλα. Ο καλύτερος τρόπος για να επιτευχθεί αυτό είναι με τα πλέγματα CSS. Αλλά αντί να ορίσετε σταθερές τιμές πλάτους (όπως 50%) για τη στήλη πλέγμα-πρότυπο, χρησιμοποιήστε το επαναλαμβάνω() λειτουργούν ως εξής:

.πλευρική μπάρα-πλέγμα {
απεικόνιση: πλέγμα;
πλέγμα-πρότυπο-στήλες: επαναλαμβάνω(αυτόματη προσαρμογή, ελάχιστη μέγ(25rem, 1fr));
ευθυγράμμιση-περιεχόμενο: αρχή;
χάσμα: 2rem;
}

Αυτό το CSS ορίζει ένα ελάχιστο μέγεθος 25rem και μέγιστο μέγεθος 1fr. Αυτή η προσέγγιση είναι πολύ καλύτερη από τον καθορισμό σταθερών πλάτη, επειδή βασίζεται σε εγγενές μέγεθος. Με άλλα λόγια, επιτρέπει στο πρόγραμμα περιήγησης να καταλάβει τα πράγματα με βάση τις διαθέσιμες παραμέτρους.

Τώρα, όταν μειώνετε το παράθυρο του προγράμματος περιήγησης σε ένα συγκεκριμένο πλάτος, το πλαίσιο πλέγματος προσαρμόζεται αυτόματα σε δύο πλαίσια ανά γραμμή.

Όταν η οθόνη γίνεται μικρότερη, πέφτει σε ένα πλαίσιο ανά γραμμή. Έτσι, το πρόγραμμα περιήγησης στοιβάζει τα πάντα το ένα πάνω στο άλλο. Όλα αυτά συμβαίνουν καθώς αλλάζετε το μέγεθος του παραθύρου. Μπορείτε να χρησιμοποιήσετε μια λειτουργία προγράμματος περιήγησης όπως Chrome DevTools για να κατανοήσετε πώς λειτουργεί αυτό το CSS, και πώς η αλλαγή μεγέθους των παραθύρων αλλάζει τη διάταξη.

Το καλύτερο μέρος είναι ότι δεν χρειάζεστε ένα ερώτημα κοντέινερ ή κάτι φανταχτερό για να κάνετε το στοιχείο να ανταποκρίνεται. Απλώς ορίστε ένα πλέγμα και χρησιμοποιήστε το min-max() για να ορίσετε κλασματικές τιμές αντί για σταθερά μεγέθη.

Μάθετε περισσότερα για το CSS Grid

Αν θέλετε να είστε υπέροχοι με το CSS, πρέπει να έχετε βαθιά γνώση των Πλέγμα CSS. Τα πλέγματα μπορεί να είναι αρκετά ισχυρά όταν χρησιμοποιούνται καλά. Μπορείτε να επιτύχετε σχεδόν οποιαδήποτε διάταξη θέλετε χρησιμοποιώντας τα Πλέγματα. Αυτό το καθιστά απαραίτητο εργαλείο στο CSS.

Ένα πράγμα που πρέπει να έχετε κατά νου όταν χρησιμοποιείτε πλέγματα CSS είναι να εστιάσετε στην ανταπόκριση. Μπορείτε επίσης να χρησιμοποιήσετε την κλασματική προσέγγιση για να αποφύγετε περιπτώσεις σύγκρουσης μεταξύ στοιχείων. Θυμηθείτε να κυριαρχήσετε στα πλέγματα CSS γιατί το στυλ διάταξης θα σας βοηθήσει πάρα πολύ κατά τη δημιουργία ιστοσελίδων.