Διάταξη πλέγματος CSS

Πίνακας περιεχομένων

Το CSS Grid Layout Module προσφέρει ένα σύστημα διάταξης βασισμένο σε πλέγμα, με γραμμές και στήλες, που διευκολύνει το σχεδιασμό ιστοσελίδων χωρίς να χρειάζεται να χρησιμοποιείτε floats και τοποθέτηση:

Header

Main

Right

Footer

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Grid Layout</h1>

<p>The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:</p>

<div class="grid-container">
  <div class="item1">Header</div>
  <div class="item2">Menu</div>
  <div class="item3">Main</div>  
  <div class="item4">Right</div>
  <div class="item5">Footer</div>
</div>

</body>
</html>

Μια διάταξη πλέγματος πρέπει να έχει ένα γονικό στοιχείο με την ιδιότητα display να έχει οριστεί σε πλέγμα.

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

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px;
  font-size: 30px;
}

.item1 {
  grid-row: 1;
  grid-column: 1;
}

.item2 {
  grid-row: 1;
  grid-column: 2;
}

.item3 {
  grid-row: 1;
  grid-column: 3;
}

.item4 {
  grid-row: 2;
  grid-column: 1;
}

.item5 {
  grid-row: 2;
  grid-column: 2;
}

.item6 {
  grid-row: 2;
  grid-column: 3;
}

.item7 {
  grid-row: 3;
  grid-column: 1 / span 3;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="grid-item item1">1</div>
  <div class="grid-item item2">2</div>
  <div class="grid-item item3">3</div>  
  <div class="grid-item item4">4</div>
  <div class="grid-item item5">5</div>
  <div class="grid-item item6">6</div>  
  <div class="grid-item item7">7</div>
</div>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em>.</p>

<p>Direct child elements(s) of the grid container automatically becomes grid items.</p>

</body>
</html>

Διάταξη πλέγματος

Υποστήριξη προγράμματος περιήγησης

Οι ιδιότητες πλέγματος υποστηρίζονται σε όλα τα σύγχρονα προγράμματα περιήγησης.


57.0	16.0	52.0	10	44

Στοιχεία Πλέγματος

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

Παράδειγμα

<div 
  class="grid-container">
  <div class="grid-item">1</div>
  <div 
  class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div 
  class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div 
  class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

1

2

3

4

5

6

7

8

9

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}
.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>Grid Elements</h1>

<p>A Grid Layout must have a parent element with the <em>display</em> property set to <em>grid</em> or <em>inline-grid</em>.</p>

<p>Direct child element(s) of the grid container automatically becomes grid items.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Ιδιότητα εμφάνισης

Ένα στοιχείο HTML γίνεται κοντέινερ πλέγματος όταν η ιδιότητά του εμφανίζει Έχει οριστεί πλέγμα ή inline-grid.

Παράδειγμα

 .grid-container {
  
  display: grid;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: grid</h1>

<p>Use display: grid; to make a block-level grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Παράδειγμα

 .grid-container {
  
  display: inline-grid;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>display: inline-grid</h1>

<p>Use display: inline-grid; to make an inline grid container:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

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

Στήλες Πλέγματος

Οι κάθετες γραμμές των στοιχείων πλέγματος ονομάζονται στήλες.

Γραμμές πλέγματος

Οι οριζόντιες γραμμές των στοιχείων πλέγματος ονομάζονται σειρές.

Κενά πλέγματος

Τα κενά μεταξύ κάθε στήλης/γραμμής ονομάζονται κενά.

Μπορείτε να προσαρμόσετε το μέγεθος του κενού χρησιμοποιώντας μία από τις ακόλουθες ιδιότητες:

column-gap
row-gap
gap

Παράδειγμα

Η ιδιότητα column-gap ορίζει το κενό μεταξύ των στηλών:

 .grid-container {
  
  display: grid;
  column-gap: 50px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The column-gap Property</h1>

<p>Use the <em>column-gap</em> property to adjust the space between the columns:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Παράδειγμα

Η ιδιότητα row-gap ορίζει το κενό μεταξύ των σειρών:

 .grid-container {
  
  display: grid;
  row-gap: 50px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  row-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The row-gap Property</h1>

<p>Use the <em>row-gap</em> property to adjust the space between the rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Παράδειγμα

Η ιδιότητα gap είναι μια συντομογραφία για το gap-row και το Ιδιότητες column-gap:

 .grid-container {
  
  display: grid;
  gap: 50px 100px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px 100px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows.</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Παράδειγμα

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

 .grid-container {
  
  display: grid;
  gap: 50px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<h1>The gap Property:</h1>

<p>Use the <em>gap</em> shorthand property to adjust the space between the columns and rows:</p>

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>  
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>  
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>  
</div>

</body>
</html>

Γραμμές πλέγματος

Οι γραμμές μεταξύ των στηλών ονομάζονται γραμμές στηλών.

Οι γραμμές μεταξύ των σειρών ονομάζονται γραμμές γραμμής.

Ανατρέξτε στους αριθμούς γραμμών όταν τοποθετείτε ένα στοιχείο πλέγματος σε ένα κοντέινερ πλέγματος:

Παράδειγμα

Τοποθετήστε ένα στοιχείο πλέγματος στη γραμμή στήλης 1 και αφήστε το να τελειώσει στη γραμμή στήλης 3:

 .item1 {

    grid-column-start: 1;
  grid-column-end: 3;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

Παράδειγμα

Τοποθετήστε ένα στοιχείο πλέγματος στη γραμμή 1 και αφήστε το να τελειώσει στη γραμμή 3:

 .item1 {

    grid-row-start: 1;
  grid-row-end: 3;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}
</style>
</head>
<body>

<h1>Grid Lines</h1>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

<p>You can refer to line numbers when placing grid items.</p>

</body>
</html>

Όλες οι ιδιότητες πλέγματος CSS

column-gap: Καθορίζει το κενό μεταξύ των στηλών
gap: Μια συντομογραφία για τις ιδιότητες row-gap και column-gap
grid: Μια συντομογραφία για τις γραμμές grid-template-rows, πλέγμα-πρότυπο-στήλες, πλέγμα-πρότυπο-περιοχές, πλέγμα-αυτόματες σειρές, grid-auto-columns και τις ιδιότητες grid-auto-flow
grid-area: Είτε καθορίζει ένα όνομα για το στοιχείο πλέγματος είτε αυτή η ιδιότητα είναι μια συντομογραφία για τις grid-row-start, grid-column-start, grid-row ιδιότητες -end και grid-column-end
grid-auto-columns: Καθορίζει ένα προεπιλεγμένο μέγεθος στήλης
grid-auto-flow: Καθορίζει τον τρόπο με τον οποίο εισάγονται τα αυτόματα τοποθετημένα στοιχεία στο πλέγμα
grid-auto-rows: Καθορίζει ένα προεπιλεγμένο μέγεθος σειράς
grid-column: Μια συντομογραφία για τις ιδιότητες grid-column-start και grid-column-end
grid-column-end: Καθορίζει πού θα τερματιστεί το στοιχείο πλέγματος
grid-column-gap: Καθορίζει το μέγεθος του κενού μεταξύ των στηλών
grid-column-start: Καθορίζει πού θα ξεκινήσει το στοιχείο πλέγματος
grid-gap: Μια συντομογραφία για τις ιδιότητες grid-row-gap και grid-column-gap
grid-row: Μια συντομογραφία για τις ιδιότητες grid-row-start και grid-row-end
grid-row-end: Καθορίζει πού θα τερματιστεί το στοιχείο πλέγματος
grid-row-gap: Καθορίζει το μέγεθος του κενού μεταξύ των σειρών
grid-row-start: Καθορίζει πού θα ξεκινήσει το στοιχείο πλέγματος
grid-template: Μια συντομογραφία για τις grid-template-rows, grid-template-columns και ιδιότητες grid-areas
grid-template-areas: Καθορίζει τον τρόπο εμφάνισης στηλών και σειρών, χρησιμοποιώντας στοιχεία πλέγματος με όνομα
grid-template-columns: Καθορίζει το μέγεθος των στηλών και πόσες στήλες σε μια διάταξη πλέγματος
grid-template-rows: Καθορίζει το μέγεθος των σειρών σε μια διάταξη πλέγματος
row-gap: Καθορίζει το κενό μεταξύ των σειρών πλέγματος