Πώς να κάνετε το HTML σας να ανταποκρίνεται προσθέτοντας μία μόνο γραμμή CSS

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

Και το πιο όμορφο μέρος: η απόκριση θα προστεθεί με μία μόνο γραμμή CSS.

Αυτό σημαίνει ότι δεν χρειάζεται να φορτώνω το HTML με άσχημο ονόματα της κατηγορίας (δηλαδή col-sm-4, col-md-8) ή να δημιουργήσετε ερωτήματα των μέσων ενημέρωσης για κάθε μέγεθος της οθόνης.

Αν θέλετε να μάθετε να δημιουργείτε ιστοσελίδες με ανταπόκριση σε επαγγελματικό επίπεδο, μπορείτε να εξετάσετε το bootcamp του ανταποκριτικού σχεδιασμού ιστοσελίδων της Scrimba, καθώς οι μαθητές από αρχάριους έως προχωρημένους έως 15 ώρες διαδραστικών μαθημάτων.

Τώρα ας πάμε σε αυτό!

Η εγκατάσταση

Για αυτό το άρθρο, θα συνεχίσουμε με το πλέγμα που χρησιμοποιήσαμε στο πρώτο άρθρο CSS Grid. Στη συνέχεια, θα προσθέσουμε τις εικόνες στο τέλος του άρθρου. Δείτε πώς φαίνεται το αρχικό μας πλέγμα:

Εδώ είναι το HTML:

 1 2 3 4 5 6 

Και το CSS:

.container { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; } 

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

Εάν αυτός ο κώδικας σας μπερδεύει, θα σας συνιστούσα να διαβάσετε το άρθρο Μάθετε CSS Grid σε 5 λεπτά, όπου εξηγώ τα βασικά στοιχεία της ενότητας διάταξης.

Ας ξεκινήσουμε κάνοντας τις στήλες να ανταποκρίνονται.

Βασική απόκριση με τη μονάδα κλασμάτων

Το CSS Grid φέρνει μαζί του μια εντελώς νέα τιμή που ονομάζεται κλάσμα μονάδας. Η μονάδα κλασμάτων είναι γραμμένη όπως frκαι σας επιτρέπει να χωρίσετε το δοχείο σε όσα κλάσματα θέλετε.

Ας αλλάξουμε καθεμία από τις στήλες σε πλάτος μονάδας κλάσματος.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 50px 50px; } 

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

Εάν αλλάξουμε την grid-template-columnsτιμή σε 1fr 2fr 1fr, η δεύτερη στήλη θα έχει τώρα διπλάσιο πλάτος από τις δύο άλλες στήλες. Το συνολικό πλάτος είναι τώρα τέσσερις κλασματικές μονάδες και η δεύτερη καταλαμβάνει δύο από αυτές, ενώ οι υπόλοιπες καταλαμβάνουν η μία. Δείτε πώς φαίνεται:

Με άλλα λόγια, η τιμή της κλασματικής μονάδας καθιστά εξαιρετικά εύκολο για εσάς να αλλάξετε το πλάτος των στηλών.

Προηγμένη ανταπόκριση

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

επαναλαμβάνω()

Θα ξεκινήσουμε με τη repeat()λειτουργία. Αυτός είναι ένας πιο ισχυρός τρόπος προσδιορισμού των στηλών και των σειρών σας. Ας πάρουμε το αρχικό μας πλέγμα και να το αλλάξουμε χρησιμοποιώντας επαναλαμβανόμενο ():

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(2, 50px); } 

Με άλλα λόγια, repeat(3, 100px)είναι πανομοιότυπο με 100px 100px 100px. Η πρώτη παράμετρος καθόρισε πόσες στήλες ή σειρές θέλετε και η δεύτερη καθορίζει το πλάτος τους, οπότε αυτό θα μας δώσει ακριβώς την ίδια διάταξη όπως ξεκινήσαμε με:

αυτόματη εφαρμογή

Τότε υπάρχει αυτόματη εφαρμογή. Ας παραλείψουμε να έχουμε ένα σταθερό ποσό στηλών και μάλλον να αντικαταστήσουμε το 3 με auto-fit.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, 100px); grid-template-rows: repeat(2, 100px); } 

Αυτό έχει ως αποτέλεσμα την ακόλουθη συμπεριφορά:

Το πλέγμα μεταβάλλει τώρα τον αριθμό των στηλών με το πλάτος του κοντέινερ.

Απλώς προσπαθεί να τοποθετήσει όσο το δυνατόν περισσότερες στήλες πλάτους 100 εικονοστοιχείων στο κοντέινερ.

Ωστόσο, εάν σκληρά κωδικοποιήσουμε όλες τις στήλες να είναι ακριβώς 100px, δεν θα έχουμε ποτέ την ευελιξία που θέλουμε, καθώς σπάνια θα προσθέσουν μέχρι το πλήρες πλάτος. Όπως μπορείτε να δείτε στο παραπάνω gif, το πλέγμα αφήνει συχνά κενό διάστημα στη δεξιά πλευρά.

ελάχιστο ()

Το τελικό συστατικό που χρειαζόμαστε για να το διορθώσουμε ονομάζεται minmax(). Θα αντικαταστήσουμε απλά 100px με minmax(100px, 1fr). Εδώ είναι το τελικό CSS.

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-template-rows: repeat(2, 100px); } 

Παρατηρήστε ότι όλη η ανταπόκριση συμβαίνει σε μία μόνο γραμμή CSS.

Αυτό έχει ως αποτέλεσμα την ακόλουθη συμπεριφορά:

Και όπως βλέπετε αυτό λειτουργεί τέλεια. Η minmax()συνάρτηση ορίζει εύρος μεγεθών μεγαλύτερο ή ίσο με το ελάχιστο και μικρότερο ή ίσο με το μέγιστο.

So the columns will now always be at least 100px. However, if there is more available space, the grid will simply distribute this equally to each of the columns, as the columns turn into a fraction unit instead of 100 px.

Adding the images

Now the final step is to add the images. This has nothing to do with CSS Grid, but let’s still look at the code.

We’ll start off by adding an image tag inside of each of the grid items.

To make the image fit into the item, we’ll set it to be as wide and tall as the item itself, and then use object-fit: cover;. This will make the image cover its entire container, and the browser will crop it if it’s needed.

.container > div > img { width: 100%; height: 100%; object-fit: cover; } 

Which ends up like the following:

And that’s it! You now know one of the most complex concepts in CSS Grid, so give yourself a pat on the back.

Browser support

Πριν τελειώσουμε, πρέπει επίσης να αναφέρω την υποστήριξη του προγράμματος περιήγησης. Τη στιγμή της σύνταξης αυτού του άρθρου, το 93% της παγκόσμιας επισκεψιμότητας ιστότοπων υποστηρίζει CSS Grid και αυξάνεται. Γίνεται όλο και πιο ξεκάθαρο ότι το Grid μετατρέπεται σε δεξιότητα που πρέπει να έχει για προγραμματιστές front-end Μοιάζει πολύ με αυτό που συνέβη με το CSS Flexbox πριν από μερικά χρόνια.

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

Ευχαριστώ για την ανάγνωση! Το όνομά μου είναι Per Borgen, είμαι ο συνιδρυτής της Scrimba, μιας διαδραστικής πλατφόρμας μάθησης για την εκμάθηση κώδικα.