Η συνάρτηση repeat στα CSS Grid
Εάν έχετε πολλές στήλες,
για τις οποίες ορίζονται ίδια μεγέθη,
τότε μπορείτε να απλοποιήσετε τη σύνταξη, χρησιμοποιώντας
τη συνάρτηση repeat.
Στην πρώτη παράμετρο αυτής της συνάρτησης καθορίζεται
ο αριθμός των στηλών, και στη δεύτερη - το πλάτος τους.
Ας δούμε με παραδείγματα,
πώς λειτουργεί αυτό.
Παράδειγμα
Ας υποθέσουμε ότι έχουμε τρεις στήλες ίδιου μεγέθους:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
Απλοποιούμε τη σύνταξη με τη βοήθεια της repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Παράδειγμα
Ας υποθέσουμε ότι έχουμε τρεις στήλες ίδιου μεγέθους, και μια τέταρτη διαφορετικού μεγέθους:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr;
}
Απλοποιούμε τη σύνταξη με τη βοήθεια της repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
}
Παράδειγμα
Ας υποθέσουμε ότι οι πρώτες τρεις στήλες έχουν ένα μέγεθος, και οι επόμενες τρεις στήλες έχουν διαφορετικό μέγεθος:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 2fr 2fr 2fr;
}
Απλοποιούμε τη σύνταξη με τη βοήθεια της repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) repeat(3, 2fr);
}
Παράδειγμα
Ας υποθέσουμε ότι οι πρώτες τρεις στήλες έχουν ένα μέγεθος, μετά υπάρχει άλλη μια στήλη, και μετά ακόμη τρεις στήλες διαφορετικού μεγέθους:
#parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 3fr 2fr 2fr 2fr;
}
Απλοποιούμε τη σύνταξη με τη βοήθεια της repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 3fr repeat(3, 2fr);
}
Παράδειγμα
Η απλοποίηση λειτουργεί για οποιεσδήποτε μονάδες μεγέθους. Ας υποθέσουμε για παράδειγμα ότι έχουμε τρεις στήλες σε pixels:
#parent {
display: grid;
grid-template-columns: 200px 200px 200px;
}
Απλοποιούμε τη σύνταξη με τη βοήθεια της repeat:
#parent {
display: grid;
grid-template-columns: repeat(3, 200px);
}
Πρακτικές Ασκήσεις
Δημιουργήστε 4 στήλες ίδιου
μεγέθους χρησιμοποιώντας την repeat.
Δημιουργήστε 4 στήλες μεγέθους 100px,
και άλλες 3 στήλες μεγέθους 2fr.
Δημιουργήστε 2 στήλες μεγέθους 100px,
άλλες 3 στήλες μεγέθους 200px,
μετά μια στήλη μεγέθους 1fr,
και μετά 2 στήλες
μεγέθους 10%.
