Skip to content

Πίνακας Συντομεύσεων Διάταξης CSS Grid

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

Κοντέινερ Πλέγματος (Grid Container)

Ιδιότητα Τιμή Περιγραφή
display grid Ορίζει το στοιχείο ως κοντέινερ πλέγματος
grid-template-columns 100px 1fr Ορίζει το πλάτος των στηλών
grid-template-rows 100px 1fr Ορίζει το ύψος των γραμμών
grid-template-areas header header
sidebar main
footer footer		 Ορίζει το πλέγμα ονομάζοντας περιοχές
grid-column-gap 10px Ορίζει το κενό μεταξύ των στηλών
grid-row-gap 10px Ορίζει το κενό μεταξύ των γραμμών
grid-gap 10px 20px Ορίζει ταυτόχρονα το κενό μεταξύ γραμμών και στηλών
justify-items start Στοιχίζει τα στοιχεία του πλέγματος οριζόντια μέσα στα κελιά τους
align-items start Στοιχίζει τα στοιχεία του πλέγματος κάθετα μέσα στα κελιά τους
justify-content start Στοιχίζει ολόκληρο το πλέγμα οριζόντια μέσα στο κοντέινερ πλέγματος
align-content start Στοιχίζει ολόκληρο το πλέγμα κάθετα μέσα στο κοντέινερ πλέγματος

Στοιχεία Πλέγματος (Grid Items)

Ιδιότητα Τιμή Περιγραφή
grid-column 1 / 3 Ορίζει τις στήλες που καταλαμβάνει το στοιχείο
grid-row 1 / 3 Ορίζει τις γραμμές που καταλαμβάνει το στοιχείο
grid-area header Τοποθετεί στοιχεία πλέγματος ονομάζοντας περιοχές
justify-self start Στοιχίζει ένα μεμονωμένο στοιχείο πλέγματος οριζόντια μέσα στο κελί του
align-self start Στοιχίζει ένα μεμονωμένο στοιχείο πλέγματος κάθετα μέσα στο κελί του
grid-column-start 1 Ορίζει τη γραμμή έναρξης της στήλης
grid-column-end 3 Ορίζει τη γραμμή τέλους της στήλης
grid-row-start 1 Ορίζει τη γραμμή έναρξης της γραμμής
grid-row-end 3 Ορίζει τη γραμμή τέλους της γραμμής

Παράδειγμα Media Query 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Άλλα παραδείγματα

Διάταξη δύο στηλών 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Διάταξη τριών στηλών 

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Κατακόρυφο κεντράρισμα 

.container {
  display: grid;
  align-items: center;
}

Οριζόντιο κεντράρισμα 

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