Ξεκλειδώνοντας το CSS Grid: Κατακτώντας τις Έμμεσες Ονομαστικές Γραμμές για Δυναμικές Διατάξεις

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

Τι είναι οι Έμμεσες Ονομαστικές Γραμμές;

Στο CSS Grid, οι γραμμές του πλέγματος είναι οι αριθμημένες οριζόντιες και κάθετες γραμμές που σχηματίζουν τη δομή του πλέγματός σας. Μπορείτε να ονομάσετε ρητά αυτές τις γραμμές χρησιμοποιώντας τις ιδιότητες grid-template-columns και grid-template-rows. Ωστόσο, όταν ορίζετε λωρίδες πλέγματος (στήλες και σειρές) με ονόματα, το CSS Grid δημιουργεί αυτόματα έμμεσες ονομαστικές γραμμές. Αυτό σημαίνει ότι αν ονομάσετε μια λωρίδα πλέγματος, οι γραμμές που την οριοθετούν κληρονομούν αυτό το όνομα, με τα προθέματα και επιθέματα -start και -end αντίστοιχα.

Για παράδειγμα, εάν ορίσετε μια λωρίδα στήλης με το όνομα 'sidebar', το CSS Grid δημιουργεί αυτόματα δύο ονομαστικές γραμμές: 'sidebar-start' και 'sidebar-end'. Αυτή η έμμεση σύμβαση ονομασίας σας επιτρέπει να αναφέρεστε σε αυτές τις γραμμές κατά την τοποθέτηση στοιχείων του πλέγματος, καθιστώντας τον κώδικά σας πιο ευανάγνωστο και συντηρήσιμο.

Σύνταξη και Χρήση

Η σύνταξη για τον ορισμό λωρίδων πλέγματος με ονόματα είναι απλή. Μέσα στις ιδιότητες grid-template-columns και grid-template-rows, μπορείτε να καθορίσετε το μέγεθος της λωρίδας και στη συνέχεια να περικλείσετε το όνομα σε τετράγωνες αγκύλες. Ακολουθεί ένα βασικό παράδειγμα:

            .grid-container {
  display: grid;
  grid-template-columns: [col-start] 1fr [col-end];
  grid-template-rows: [row-start] auto [row-end];
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, έχουμε ορίσει μία μόνο στήλη και σειρά, ονομάζοντας ρητά τις γραμμές έναρξης και λήξης. Ωστόσο, η πραγματική δύναμη έρχεται όταν ονομάζουμε τις ίδιες τις *λωρίδες*. Ας το τροποποιήσουμε:

            .grid-container {
  display: grid;
  grid-template-columns: [sidebar] 200px [main] 1fr;
  grid-template-rows: [header] auto [content] 1fr [footer] auto;
}

            

              
                Copy
              
            
          

Τώρα, έχουμε έμμεσα ονομασμένες γραμμές. Εξετάστε τις στήλες. Οι γραμμές είναι τώρα:

• sidebar-start: Η γραμμή πριν από τη στήλη 'sidebar'.
• sidebar-end: Η γραμμή μετά τη στήλη 'sidebar', η οποία είναι επίσης main-start.
• main-end: Η γραμμή μετά τη στήλη 'main'.

Και οι σειρές:

• header-start: Η γραμμή πριν από τη σειρά 'header'.
• header-end: Η γραμμή μετά τη σειρά 'header', η οποία είναι επίσης content-start.
• content-end: Η γραμμή μετά τη σειρά 'content', η οποία είναι επίσης footer-start.
• footer-end: Η γραμμή μετά τη σειρά 'footer'.

Για να τοποθετήσετε στοιχεία χρησιμοποιώντας αυτές τις έμμεσες ονομαστικές γραμμές, χρησιμοποιήστε τις ιδιότητες grid-column-start, grid-column-end, grid-row-start, και grid-row-end:

            .sidebar {
  grid-column-start: sidebar-start;
  grid-column-end: sidebar-end;
  grid-row-start: header-start;
  grid-row-end: footer-end;
}

.main-content {
  grid-column-start: main-start;
  grid-column-end: main-end;
  grid-row-start: content-start;
  grid-row-end: footer-end;
}

            

              
                Copy
              
            
          

Πρακτικά Παραδείγματα και Περιπτώσεις Χρήσης

Ας εξερευνήσουμε μερικά πρακτικά παραδείγματα για να επεξηγήσουμε τα οφέλη των έμμεσων ονομαστικών γραμμών.

1. Βασική Διάταξη Ιστοσελίδας

Μια συνηθισμένη διάταξη ιστοσελίδας αποτελείται από κεφαλίδα, πλοήγηση, κύρια περιοχή περιεχομένου, πλαϊνή στήλη και υποσέλιδο. Χρησιμοποιώντας έμμεσες ονομαστικές γραμμές, μπορούμε εύκολα να ορίσουμε αυτή τη δομή:

            .grid-container {
  display: grid;
  grid-template-columns: [sidebar] 250px [content] 1fr;
  grid-template-rows: [header] auto [nav] auto [main] 1fr [footer] auto;
  grid-gap: 10px;
}

.header {
  grid-column: sidebar-start / content-end;
  grid-row: header-start / header-end;
}

.nav {
  grid-column: sidebar-start / content-end;
  grid-row: nav-start / nav-end;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: main-start / footer-end;
}

.main-content {
  grid-column: content-start / content-end;
  grid-row: main-start / footer-end;
}

.footer {
  grid-column: sidebar-start / content-end;
  grid-row: footer-start / footer-end;
}

            

              
                Copy
              
            
          

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

2. Διατάξεις Καρτών με Δυναμικό Περιεχόμενο

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

            .card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
}

.card {
  display: grid;
  grid-template-rows: [title] auto [content] 1fr [actions] auto;
  border: 1px solid #ccc;
  padding: 10px;
}

.card-title {
  grid-row: title-start / title-end;
}

.card-content {
  grid-row: content-start / content-end;
}

.card-actions {
  grid-row: actions-start / actions-end;
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, κάθε κάρτα είναι ένας περιέκτης πλέγματος με τρεις σειρές: τίτλος, περιεχόμενο και ενέργειες. Οι έμμεσες ονομαστικές γραμμές διασφαλίζουν ότι αυτές οι σειρές τοποθετούνται πάντα σωστά, ακόμη και αν ένα από τα τμήματα είναι κενό ή περιέχει ποικίλες ποσότητες περιεχομένου.

3. Διάταξη Περιοδικού

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

            .magazine-grid {
    display: grid;
    grid-template-columns: [main-start] 2fr [sidebar-start] 1fr [sidebar-end main-end];
    grid-template-rows: [header-start] auto [feature-start] 2fr [feature-end] auto [other-articles-start] 1fr [other-articles-end footer-start] auto [footer-end];
    grid-gap: 10px;
}

.header {
    grid-column: main-start / main-end;
    grid-row: header-start / header-end;
}

.featured-article {
    grid-column: main-start / sidebar-start;
    grid-row: feature-start / other-articles-start;
}

.sidebar {
    grid-column: sidebar-start / sidebar-end;
    grid-row: feature-start / footer-end;
}

.other-articles {
    grid-column: main-start / sidebar-start;
    grid-row: other-articles-start / footer-start;
}

.footer {
    grid-column: main-start / main-end;
    grid-row: footer-start / footer-end;
}

            

              
                Copy
              
            
          

Παρατηρήστε πώς έχουμε συνδυάσει τις sidebar-end και main-end, και τις other-articles-end και footer-start σε ενιαίες ονομαστικές γραμμές. Αυτό απλοποιεί τον ορισμό του πλέγματος, παρέχοντας ταυτόχρονα σαφή και ουσιαστικά ονόματα.

Οφέλη από τη Χρήση Έμμεσων Ονομαστικών Γραμμών

Οι έμμεσες ονομαστικές γραμμές προσφέρουν αρκετά πλεονεκτήματα σε σχέση με τις ρητά αριθμημένες ή ονομασμένες γραμμές:

• Αναγνωσιμότητα: Η χρήση ουσιαστικών ονομάτων για τις λωρίδες και τις γραμμές του πλέγματος καθιστά τον κώδικά σας πιο αυτο-τεκμηριωμένο και ευκολότερο στην κατανόηση.
• Συντηρησιμότητα: Όταν χρειάζεται να τροποποιήσετε τη δομή του πλέγματος, μπορείτε απλά να αλλάξετε τους ορισμούς των λωρίδων, και οι έμμεσες ονομαστικές γραμμές θα ενημερωθούν αυτόματα. Αυτό μειώνει τον κίνδυνο εισαγωγής σφαλμάτων κατά τη χειροκίνητη ενημέρωση των αριθμών των γραμμών του πλέγματος.
• Ευελιξία: Οι έμμεσες ονομαστικές γραμμές σας επιτρέπουν να δημιουργείτε πιο ευέλικτες και προσαρμόσιμες διατάξεις, ειδικά όταν έχετε να κάνετε με δυναμικό περιεχόμενο ή responsive designs.
• Μειωμένος Επαναλαμβανόμενος Κώδικας (Boilerplate): Μειώνουν την ποσότητα του κώδικα που πρέπει να γράψετε, καθώς δεν χρειάζεται να ορίσετε ρητά κάθε όνομα γραμμής.

Βέλτιστες Πρακτικές

Για να μεγιστοποιήσετε τα οφέλη των έμμεσων ονομαστικών γραμμών, λάβετε υπόψη τις ακόλουθες βέλτιστες πρακτικές:

• Χρησιμοποιήστε περιγραφικά ονόματα: Επιλέξτε ονόματα που υποδεικνύουν σαφώς τον σκοπό των λωρίδων και των γραμμών του πλέγματος. Αποφύγετε γενικά ονόματα όπως "col1" ή "row2". Σκεφτείτε το περιεχόμενο που θα καταλάβει τον χώρο.
• Διατηρήστε μια συνεπή σύμβαση ονομασίας: Καθιερώστε ένα συνεπές μοτίβο για την ονομασία των λωρίδων και των γραμμών του πλέγματός σας για να διασφαλίσετε ότι ο κώδικάς σας είναι εύκολος στην κατανόηση και συντήρηση.
• Αποφύγετε υπερβολικά πολύπλοκα πλέγματα: Ενώ οι έμμεσες ονομαστικές γραμμές μπορούν να απλοποιήσουν πολύπλοκες διατάξεις, είναι ακόμα σημαντικό να διατηρείτε τη δομή του πλέγματός σας όσο το δυνατόν πιο απλή. Τα υπερβολικά πολύπλοκα πλέγματα μπορεί να είναι δύσκολο να διαχειριστούν και να αποσφαλματωθούν.
• Δοκιμάστε τις διατάξεις σας διεξοδικά: Πάντα να δοκιμάζετε τις διατάξεις πλέγματός σας σε διαφορετικές συσκευές και μεγέθη οθόνης για να διασφαλίσετε ότι είναι responsive και λειτουργούν όπως αναμένεται. Εξετάστε τη χρήση των εργαλείων προγραμματιστή του προγράμματος περιήγησης για να επιθεωρήσετε οπτικά το πλέγμα και τις ονομαστικές γραμμές.
• Χρησιμοποιήστε σχόλια: Προσθέστε σχόλια στον κώδικα CSS σας για να εξηγήσετε τον σκοπό της δομής του πλέγματός σας και τη σημασία των ονομαστικών γραμμών σας. Αυτό θα διευκολύνει άλλους προγραμματιστές (και τον εαυτό σας στο μέλλον) να κατανοήσουν τον κώδικά σας.

Σκέψεις για Παγκόσμιο Κοινό

Κατά την ανάπτυξη ιστοσελίδων και εφαρμογών web για ένα παγκόσμιο κοινό, είναι σημαντικό να λαμβάνονται υπόψη οι ακόλουθοι παράγοντες κατά τη χρήση του CSS Grid και των έμμεσων ονομαστικών γραμμών:

• Γλώσσα: Σκεφτείτε πώς οι διαφορετικές γλώσσες μπορεί να επηρεάσουν τη διάταξη του πλέγματός σας. Για παράδειγμα, οι γλώσσες που διαβάζονται από δεξιά προς τα αριστερά (RTL) μπορεί να απαιτούν διαφορετικές δομές πλέγματος από τις γλώσσες που διαβάζονται από αριστερά προς τα δεξιά (LTR). Χρησιμοποιήστε λογικές ιδιότητες (π.χ., grid-column-start: start) αντί για φυσικές ιδιότητες (π.χ., grid-column-start: left) για καλύτερη υποστήριξη διεθνοποίησης.
• Περιεχόμενο: Προσέξτε το μήκος του κειμένου σε διαφορετικές γλώσσες. Ορισμένες γλώσσες μπορεί να απαιτούν περισσότερο χώρο από άλλες, γεγονός που θα μπορούσε να επηρεάσει τη διάταξη του πλέγματός σας. Βεβαιωθείτε ότι το πλέγμα σας είναι αρκετά ευέλικτο για να φιλοξενήσει διαφορετικά μήκη περιεχομένου.
• Κουλτούρα: Λάβετε υπόψη τις πολιτισμικές διαφορές κατά τον σχεδιασμό της διάταξης του πλέγματός σας. Για παράδειγμα, η τοποθέτηση ορισμένων στοιχείων μπορεί να είναι πιο κατάλληλη σε ορισμένους πολιτισμούς από ό,τι σε άλλους. Συμβουλευτείτε ειδικούς σε πολιτισμικά θέματα ή διεξάγετε έρευνα χρηστών για να διασφαλίσετε ότι η διάταξή σας είναι πολιτισμικά ευαίσθητη.
• Προσβασιμότητα: Διασφαλίστε ότι η διάταξη του πλέγματός σας είναι προσβάσιμη σε χρήστες με αναπηρίες. Χρησιμοποιήστε σημασιολογική HTML και χαρακτηριστικά ARIA για να παρέχετε στις βοηθητικές τεχνολογίες πληροφορίες σχετικά με τη δομή και το περιεχόμενο του πλέγματός σας.

Για παράδειγμα, μια ιστοσελίδα που απευθύνεται τόσο σε αγγλόφωνους όσο και σε αραβόφωνους ομιλητές μπορεί να χρησιμοποιεί διαφορετικές δομές πλέγματος για τις διατάξεις LTR και RTL, αντίστοιχα. Αυτό θα μπορούσε να επιτευχθεί με CSS χρησιμοποιώντας τον επιλογέα :dir(rtl).

            /* Default LTR layout */
.grid-container {
    display: grid;
    grid-template-columns: [content-start] 2fr [sidebar-start] 1fr [sidebar-end content-end];
}

.sidebar {
    grid-column: sidebar-start / sidebar-end;
}

.content {
    grid-column: content-start / sidebar-start;
}

/* RTL layout */
:dir(rtl) .grid-container {
    grid-template-columns: [sidebar-start] 1fr [content-start] 2fr [content-end sidebar-end];
}

:dir(rtl) .sidebar {
    grid-column: sidebar-start / content-start;
}

:dir(rtl) .content {
    grid-column: content-start / content-end;
}

            

              
                Copy
              
            
          

Προηγμένες Τεχνικές

1. Συνδυασμός Ρητών και Έμμεσων Ονομαστικών Γραμμών

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

            .grid-container {
  display: grid;
  grid-template-columns: [sidebar] 200px [main-content] 1fr [end];
  grid-template-rows: [header] auto [main] 1fr [footer] auto;
}

.sidebar {
  grid-column: sidebar-start / sidebar-end;
  grid-row: main-start / footer;
}

.main-content {
  grid-column: main-content-start / end;
  grid-row: main-start / footer;
}

            

              
                Copy
              
            
          

Σε αυτό το παράδειγμα, έχουμε ονομάσει ρητά την τελευταία γραμμή στήλης "end" για συγκεκριμένο έλεγχο, ενώ βασιζόμαστε σε έμμεσες ονομαστικές γραμμές για το υπόλοιπο του πλέγματος.

2. Χρήση του span με Ονομαστικές Γραμμές

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

            .grid-container {
  display: grid;
  grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr;
  grid-template-rows: [row1] auto [row2] 1fr;
}

.item {
  grid-column: col1 / span 2;
  grid-row: row1 / row2;
}

            

              
                Copy
              
            
          

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

Ζητήματα Προσβασιμότητας

Ενώ το CSS Grid παρέχει ισχυρές δυνατότητες διάταξης, είναι κρίσιμο να διασφαλιστεί ότι οι διατάξεις είναι προσβάσιμες σε όλους τους χρήστες. Όταν χρησιμοποιείτε έμμεσες ονομαστικές γραμμές, λάβετε υπόψη τα εξής:

• Σημασιολογική HTML: Χρησιμοποιήστε σημασιολογικά στοιχεία HTML για να δομήσετε λογικά το περιεχόμενο. Αυτό βοηθά τους αναγνώστες οθόνης και άλλες βοηθητικές τεχνολογίες να κατανοήσουν τη σημασία του περιεχομένου.
• Χαρακτηριστικά ARIA: Χρησιμοποιήστε χαρακτηριστικά ARIA για να παρέχετε πρόσθετες πληροφορίες σχετικά με τη δομή και τον σκοπό της διάταξης. Για παράδειγμα, χρησιμοποιήστε το role="region" για να προσδιορίσετε διακριτές περιοχές της σελίδας.
• Διαχείριση Εστίασης (Focus Management): Διασφαλίστε ότι οι χρήστες μπορούν να περιηγηθούν στη διάταξη χρησιμοποιώντας το πληκτρολόγιο. Δώστε προσοχή στη σειρά εστίασης και παρέχετε οπτικές ενδείξεις για να υποδείξετε ποιο στοιχείο είναι αυτή τη στιγμή εστιασμένο.
• Αντίθεση Χρωμάτων: Εξασφαλίστε επαρκή αντίθεση χρωμάτων μεταξύ κειμένου και φόντου για να είναι το περιεχόμενο ευανάγνωστο για χρήστες με προβλήματα όρασης.
• Δοκιμή με Βοηθητικές Τεχνολογίες: Δοκιμάζετε τακτικά τις διατάξεις με αναγνώστες οθόνης και άλλες βοηθητικές τεχνολογίες για να εντοπίσετε και να αντιμετωπίσετε τυχόν προβλήματα προσβασιμότητας.

Αντιμετώπιση Συνήθων Προβλημάτων

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

• Η Διάταξη "Σπάει" σε Μικρότερες Οθόνες: Βεβαιωθείτε ότι η διάταξη του πλέγματός σας είναι responsive χρησιμοποιώντας media queries για να προσαρμόσετε τη δομή του πλέγματος για διαφορετικά μεγέθη οθόνης.
• Απροσδόκητη Τοποθέτηση Στοιχείων: Ελέγξτε διπλά τα ονόματα των γραμμών του πλέγματος και βεβαιωθείτε ότι χρησιμοποιείτε τις σωστές γραμμές έναρξης και λήξης για κάθε στοιχείο. Χρησιμοποιήστε τα εργαλεία προγραμματιστή του προγράμματος περιήγησης για να επιθεωρήσετε το πλέγμα και να εντοπίσετε τυχόν λανθασμένες ευθυγραμμίσεις.
• Προβλήματα Απόδοσης: Αποφύγετε τη δημιουργία υπερβολικά πολύπλοκων διατάξεων πλέγματος με πάρα πολλές λωρίδες και στοιχεία. Απλοποιήστε τη δομή του πλέγματός σας και βελτιστοποιήστε τον κώδικα CSS σας για να βελτιώσετε την απόδοση.
• Αντικρουόμενα Στυλ: Να γνωρίζετε τις πιθανές συγκρούσεις στυλ με άλλους κανόνες CSS. Χρησιμοποιήστε την εξειδίκευση (specificity) για να διασφαλίσετε ότι τα στυλ του πλέγματός σας εφαρμόζονται σωστά.

Συμπέρασμα

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

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