Πλέγμα CSS

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

Πως δουλεύει

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

• Το πλέγμα CSS είναι ενεργοποιημένο. Απενεργοποιήστε το προεπιλεγμένο σύστημα πλέγματος με ρύθμιση $enable-grid-classes: falseκαι ενεργοποιήστε το Πλέγμα CSS με ρύθμιση $enable-cssgrid: true. Στη συνέχεια, μεταγλωττίστε ξανά το Sass σας.

• Αντικαταστήστε τις περιπτώσεις .rowμε .grid. Η .gridκλάση ορίζει display: gridκαι δημιουργεί ένα grid-templateπάνω στο οποίο χτίζετε με το HTML σας.

• Αντικατάσταση .col-*τάξεων με .g-col-*τάξεις. Αυτό συμβαίνει επειδή οι στήλες Πλέγματος CSS χρησιμοποιούν την grid-columnιδιότητα αντί για width.

• Οι στήλες και τα μεγέθη υδρορροών ορίζονται μέσω μεταβλητών CSS. Ρυθμίστε τα στο γονικό .gridκαι προσαρμόστε όπως θέλετε, ενσωματωμένα ή σε φύλλο στυλ, με --bs-columnsκαι --bs-gap.

Στο μέλλον, το Bootstrap πιθανότατα θα στραφεί σε μια υβριδική λύση, καθώς η gapιδιοκτησία έχει επιτύχει σχεδόν πλήρη υποστήριξη του προγράμματος περιήγησης για το flexbox.

Βασικές διαφορές

Σε σύγκριση με το προεπιλεγμένο σύστημα πλέγματος:

• Τα βοηθητικά προγράμματα Flex δεν επηρεάζουν τις στήλες CSS Grid με τον ίδιο τρόπο.

• Τα κενά αντικαθιστούν τις υδρορροές. Η gapιδιότητα αντικαθιστά την οριζόντια paddingαπό το προεπιλεγμένο σύστημα πλέγματος και λειτουργεί περισσότερο σαν margin.

• Ως εκ τούτου, σε αντίθεση με .rowτα s, .gridτα s δεν έχουν αρνητικά περιθώρια και τα βοηθητικά προγράμματα περιθωρίου δεν μπορούν να χρησιμοποιηθούν για την αλλαγή των υδρορροών του πλέγματος. Τα κενά πλέγματος εφαρμόζονται οριζόντια και κάθετα από προεπιλογή. Δείτε την ενότητα προσαρμογής για περισσότερες λεπτομέρειες.

• Τα ενσωματωμένα και προσαρμοσμένα στυλ θα πρέπει να αντιμετωπίζονται ως αντικαταστάσεις για τις κατηγορίες τροποποιητών (π.χ. style="--bs-columns: 3;"vs class="row-cols-3").

• Η ένθεση λειτουργεί με παρόμοιο τρόπο, αλλά μπορεί να απαιτεί από εσάς να επαναφέρετε τον αριθμό των στηλών σας σε κάθε παρουσία ενός ένθετου .grid. Δείτε την ενότητα ένθεσης για λεπτομέρειες.

Παραδείγματα

Τρεις στήλες

Τρεις στήλες ίσου πλάτους σε όλες τις θύρες προβολής και τις συσκευές μπορούν να δημιουργηθούν χρησιμοποιώντας τις .g-col-4κλάσεις. Προσθέστε ανταποκρινόμενες κλάσεις για να αλλάξετε τη διάταξη με βάση το μέγεθος της θύρας προβολής.

<div class="grid">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Ευαίσθητος

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

<div class="grid">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

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

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Τύλιγμα

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

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Ξεκινά

Οι τάξεις έναρξης στοχεύουν να αντικαταστήσουν τις κλάσεις μετατόπισης του προεπιλεγμένου πλέγματος, αλλά δεν είναι εντελώς ίδιες. Το CSS Grid δημιουργεί ένα πρότυπο πλέγματος μέσω στυλ που λένε στα προγράμματα περιήγησης να "ξεκινούν από αυτήν τη στήλη" και "να τελειώνουν σε αυτήν τη στήλη". Αυτές οι ιδιότητες είναι grid-column-startκαι grid-column-end. Τα μαθήματα έναρξης είναι συντομογραφία για τα πρώτα. Συνδυάστε τις με τις τάξεις στηλών για το μέγεθος και ευθυγραμμίστε τις στήλες σας όπως θέλετε. Οι τάξεις έναρξης ξεκινούν 1όπως 0είναι μια μη έγκυρη τιμή για αυτές τις ιδιότητες.

<div class="grid">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Αυτόματες στήλες

Όταν δεν υπάρχουν τάξεις στα στοιχεία του πλέγματος (τα άμεσα παιδιά ενός .grid), κάθε στοιχείο πλέγματος θα ταξινομηθεί αυτόματα σε μία στήλη.

<div class="grid">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

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

<div class="grid">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Φωλιάζοντας

Παρόμοια με το προεπιλεγμένο μας σύστημα πλέγματος, το πλέγμα CSS μας επιτρέπει την εύκολη ένθεση των .grids. Ωστόσο, σε αντίθεση με το προεπιλεγμένο, αυτό το πλέγμα κληρονομεί αλλαγές στις γραμμές, τις στήλες και τα κενά. Εξετάστε το παρακάτω παράδειγμα:

• Αντικαθιστούμε τον προεπιλεγμένο αριθμό στηλών με μια τοπική μεταβλητή CSS: --bs-columns: 3.
• Στην πρώτη αυτόματη στήλη, ο αριθμός στηλών κληρονομείται και κάθε στήλη είναι το ένα τρίτο του διαθέσιμου πλάτους.
• Στη δεύτερη αυτόματη στήλη, επαναφέραμε τον αριθμό στηλών στο ένθετο .gridστο 12 (η προεπιλογή μας).
• Η τρίτη αυτόματη στήλη δεν έχει ένθετο περιεχόμενο.

Στην πράξη αυτό επιτρέπει πιο σύνθετες και προσαρμοσμένες διατάξεις σε σύγκριση με το προεπιλεγμένο σύστημα πλέγματος μας.

<div class="grid" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

Προσαρμογή

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

Αυτές οι μεταβλητές CSS δεν έχουν προεπιλεγμένη τιμή. Αντίθετα, εφαρμόζουν εναλλακτικές τιμές που χρησιμοποιούνται μέχρι να παρασχεθεί μια τοπική παρουσία. Για παράδειγμα, χρησιμοποιούμε var(--bs-rows, 1)για τις σειρές πλέγματος CSS, οι οποίες αγνοούνται --bs-rowsεπειδή δεν έχει οριστεί πουθενά ακόμα. Μόλις γίνει, η .gridπαρουσία θα χρησιμοποιήσει αυτήν την τιμή αντί για την εναλλακτική τιμή του 1.

Χωρίς τάξεις πλέγματος

Τα στοιχεία των άμεσων θυγατρικών .gridείναι στοιχεία πλέγματος, επομένως θα ταξινομούνται χωρίς ρητή προσθήκη .g-colτάξης.

<div class="grid" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Στήλες και κενά

Προσαρμόστε τον αριθμό των στηλών και το κενό.

<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Προσθήκη σειρών

Προσθήκη περισσότερων σειρών και αλλαγή της τοποθέτησης στηλών:

<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Κενά

Αλλάξτε τα κάθετα κενά μόνο τροποποιώντας το row-gap. Σημειώστε ότι χρησιμοποιούμε gapστο .grids, αλλά row-gapκαι column-gapμπορεί να τροποποιηθεί ανάλογα με τις ανάγκες.

<div class="grid" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Εξαιτίας αυτού, μπορείτε να έχετε διαφορετικά κάθετα και οριζόντια gaps, τα οποία μπορούν να λάβουν μία μόνο τιμή (όλες τις πλευρές) ή ένα ζεύγος τιμών (κάθετη και οριζόντια). Αυτό μπορεί να εφαρμοστεί με ένα ενσωματωμένο στυλ για gapή με τη --bs-gapμεταβλητή μας CSS.

<div class="grid" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

Ένας περιορισμός του Πλέγματος CSS είναι ότι οι προεπιλεγμένες κλάσεις εξακολουθούν να δημιουργούνται από δύο μεταβλητές Sass $grid-columnsκαι $grid-gutter-width. Αυτό ουσιαστικά προκαθορίζει τον αριθμό των κλάσεων που δημιουργούνται στο μεταγλωττισμένο CSS μας. Έχετε δύο επιλογές εδώ:

• Τροποποιήστε αυτές τις προεπιλεγμένες μεταβλητές Sass και μεταγλωττίστε ξανά το CSS σας.
• Χρησιμοποιήστε ενσωματωμένα ή προσαρμοσμένα στυλ για να αυξήσετε τις παρεχόμενες κλάσεις.

Για παράδειγμα, μπορείτε να αυξήσετε τον αριθμό στηλών και να αλλάξετε το μέγεθος του κενού και, στη συνέχεια, να μετρήσετε τις «στήλες» σας με έναν συνδυασμό ενσωματωμένων στυλ και προκαθορισμένων κατηγοριών στηλών Πλέγματος CSS (π.χ. .g-col-4).

<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>