Σχεδιασμός άνισου πλέγματος με CSS Grid

Η σχεδίαση ενός πλέγματος σε μια ιστοσελίδα ήταν ανέκαθεν μια πρόκληση, αλλά με την υποστήριξη του CSS Grid module από τους περισσότερους browsers γίνεται ευκολότερο. Πρόκειται για ένα από τα πιο πολύπλοκα μοντέρνα χαρακτηριστικά του CSS που όμως μας επιτρέπει να υλοποιήσουμε απαιτητικούς σχεδιασμούς με ευκολία.

Αρχίζουμε με το HTML markup, στο οποίο χρησιμοποιούμε μερικά άδεια <div> με primary και neutral κλάσεις για το χρώμα τους και x2, x3 για το μέγεθος τους :

<div class="grid">
  <div class="primary"></div>
  <div class="x2"></div>
  <div></div>
  <div></div>
  <div class="neutral"></div>
  ...
  <div class="x3 primary"></div>
</div>

Όσο για το CSS, θα πρέπει καταρχάς να δώσουμε display: grid στο εξωτερικό <div>, και grid-gap για να ορίσουμε την μεταξύ απόσταση των στηλών. Το grid-auto-rows δίνει ένα ελάχιστο ύψος στις σειρές και το grid-template-columns δίνει το 1/3 του πλάτους στη καθεμία στήλη.

.grid {
  display: grid;
  grid-gap: 0.5rem;
  grid-auto-rows: 10rem;
  grid-template-columns: repeat(3, 1fr);
}
.grid .x2 { grid-column-end: span 2; }
.grid .x3 { grid-column-end: span 3; }

.grid > div { background: #111; }
.grid > div.primary { background: rebeccapurple; }
.grid > div.neutral { background: darkgray; }
...

Τα .x2 και .x3 διατυπώνουν την έκταση κάθε σειράς με αυτήν την κλάση, ενώ οι υπόλοιποι ορισμοί αφορούν τα χρώματα του φόντου. Αν αλλάξουμε την ιδιότητα grid-column-end σε grid-row-end, μπορούμε να πάρουμε ένα οριζόντια ισομερές πλέγμα.

Αυτό ήταν ένα πολύ μικρό δείγμα από τις δυνατότητες του CSS Grid, που προσφέρει πολλές προχωρημένες επιλογές διαμόρφωσης και μπορείτε να μάθετε περισσότερα στους συνδέσμους που ακολουθούν. Η υποστήριξη του από τους σύγχρονους browsers είναι πλέον ικανοποιητική όπως μπορούμε να δούμε στο caniuse.com.

Σύνδεσμοι για περισσότερες πληροφορίες:

Σχεδιασμός άνισου πλέγματος με CSS Grid

Διαβάστε επίσης