Κάδος Διανύσματος CSS

1
2
3
4
5
6
7
8

Δοκιμάστε το Διάθεσθε

κουτί πλέγματος

Για να κάνετε το στοιχείο HTML να λειτουργεί ως κουτί πλέγματος, πρέπει να ρυθμίσετε display Η ιδιότητα ρυθμίζεται σε grid ή inline-grid.

Ο κουτί πλέγματος αποτελείται από τα στοιχεία πλέγματος που τοποθετούνται στις στήλες και τις γραμμές.

grid-template-columns ιδιότητα

grid-template-columns Η ιδιότητα ορίζει τον αριθμό των στήλων στη διάταξη πλέγματος και μπορεί να ορίσει το πλάτος κάθε στήλης.

Η τιμή είναι μια λίστα που διαχωρίζεται με κενά, όπου κάθε τιμή ορίζει την εύρος της αντίστοιχης στήλης.

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

Παράδειγμα

Δημιουργήστε ένα πλέγμα που περιέχει τέσσερα στήλες:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Δοκιμάστε το Διάθεσθε

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

grid-template-columns Η ιδιότητα μπορεί επίσης να χρησιμοποιηθεί για να καθορίσει το μέγεθος των στήλων (πλάτος).

Παράδειγμα

Ρυθμίστε το μέγεθος αυτών των 4 στήλων:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Δοκιμάστε το Διάθεσθε

grid-template-rows ιδιότητα

grid-template-rows Η ιδιότητα ορίζει το ύψος κάθε στήλης.

1
2
3
4
5
6
7
8

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

Παράδειγμα

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Δοκιμάστε το Διάθεσθε

justify-content ιδιότητα

justify-content Η ιδιότητα χρησιμοποιείται για να εξισορροπήσει ολόκληρο το πλέγμα εντός του κουτιού.

1
2
3
4
5
6
7
8

Σημείωση:Η συνολική πλάτος της πλέγματος πρέπει να είναι μικρότερη από το πλάτος του κουτιού, ώστε η ιδιότητα justify-content να λειτουργήσει.

Παράδειγμα

.grid-container {
  display: grid;
  justify-content: space-evenly;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  justify-content: space-around;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  justify-content: space-between;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  justify-content: center;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  justify-content: start;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  justify-content: end;
}

Δοκιμάστε το Διάθεσθε

align-content ιδιότητα

align-content Η ιδιότητα χρησιμοποιείται για τη κάθετη προσαρμογή του ολόκληρου του δίκτυου εντός του κάδου.

1
2
3
4
5
6
7
8

Σημείωση:Η συνολική ύψος του δίκτυου πρέπει να είναι μικρότερη από την ύψος του κάδου, ώστε να λειτουργεί η ιδιότητα align-content.

Παράδειγμα

.grid-container {
  display: grid;
  height: 400px;
  align-content: center;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-evenly;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-around;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  height: 400px;
  align-content: space-between;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  height: 400px;
  align-content: start;
}

Δοκιμάστε το Διάθεσθε

Παράδειγμα

.grid-container {
  display: grid;
  height: 400px;
  align-content: end;
}

Δοκιμάστε το Διάθεσθε