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

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

Εμφάνιση πίνακα περιεχομένων

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

Τα στοιχεία 1, 2 και 5 έχουν οριστεί να εκτείνονται σε πολλές στήλες ή σειρές.

1

2

3

4

5

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

<!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-column: 1 / span 2;
  grid-row: 1;
}

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

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

<h1>A Five Items Grid Layout</h1>

<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>

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

<p>Item 1, 2, and 5 are set to span multiple columns or rows.</p>

</body>
</html>

Παιδικά στοιχεία (αντικείμενα)

Ένα κοντέινερ πλέγματος περιέχει στοιχεία πλέγματος.

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

Η ιδιότητα πλέγματος-στήλης:

Η ιδιότητα grid-column ορίζει ποια στήλη(ες) για να τοποθετήσετε ένα στοιχείο.

Εσείς ορίζετε πού θα ξεκινά το στοιχείο και πού θα τελειώνει το στοιχείο.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Σημείωση: Η ιδιότητα grid-column είναι μια συντομογραφία για τις ιδιότητες grid-column-start και grid-column-end.

Για να τοποθετήσετε ένα στοιχείο, μπορείτε να ανατρέξετε στους αριθμούς γραμμής ή να χρησιμοποιήσετε τη λέξη-κλειδί "span" για να ορίστε πόσες στήλες θα εκτείνεται το στοιχείο.

Παράδειγμα

Κάντε το "item1" να ξεκινά από τη στήλη 1 και να τελειώνει πριν από τη στήλη 5:

 .item1 {
    
  grid-column: 1 / 5;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / 5;
}
</style>
</head>
<body>

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

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column 1 and end before column 5:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

Παράδειγμα

Κάντε το "item1" να ξεκινά από τη στήλη 1 και να εκτείνεται σε 3 στήλες:

 .item1 {
    
  grid-column: 1 / span 3;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / span 3;
}
</style>
</head>
<body>

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

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item1 will start on column-line 1 and span 3 columns:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Παράδειγμα

Κάντε το "item2" να ξεκινά από τη στήλη 2 και να εκτείνεται σε 3 στήλες:

 .item2 {
    
  grid-column: 2 / span 3;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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;
}

.item2 {
  grid-column: 2 / span 3;
}
</style>
</head>
<body>

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

<p>Use the <em>grid-column</em> property to specify where to place an item.</p>
<p>Item2 will start on column line 2 and span 3 columns:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Η ιδιότητα της γραμμής πλέγματος:

Η ιδιότητα grid-row καθορίζει σε ποια σειρά θα τοποθετήστε ένα αντικείμενο.

Εσείς ορίζετε πού θα ξεκινά το στοιχείο και πού θα τελειώνει το στοιχείο.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

Σημείωση: Η ιδιότητα grid-row είναι μια συντομογραφία για τις ιδιότητες grid-row-start και grid-row-end.

Για να τοποθετήσετε ένα στοιχείο, μπορείτε να ανατρέξετε στους αριθμούς γραμμής ή να χρησιμοποιήσετε τη λέξη-κλειδί "span" για να ορίστε πόσες σειρές θα εκτείνεται το στοιχείο:

Παράδειγμα

Κάντε το "item1" να ξεκινά από τη γραμμή 1 και να τελειώνει στη γραμμή 4:

 .item1 {
    
  grid-row: 1 / 4;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / 4;
}
</style>
</head>
<body>

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

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row-line 1 and end on row-line 4:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
</div>

</body>
</html>

Παράδειγμα

Κάντε το "item1" να ξεκινά από τη σειρά 1 και να εκτείνεται σε 2 σειρές:

 .item1 {
    
  grid-row: 1 / span 2;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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: 1 / span 2;
}
</style>
</head>
<body>

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

<p>Use the <em>grid-row</em> property to specify where to place an item.</p>
<p>Item1 will start on row 1 and span 2 rows:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
  <div class="item16">16</div>
  <div class="item17">17</div>
</div>

</body>
</html>

Η ιδιοκτησία της περιοχής πλέγματος

Η ιδιότητα grid-area μπορεί να χρησιμοποιηθεί ως συντομογραφία για τις ιδιότητες:

grid-row-start
grid-column-start
grid-row-end
grid-column-end

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

Παράδειγμα

Κάντε το "item8" να ξεκινά στη γραμμή 1 και στη στήλη 2 και να τελειώνει στη γραμμή 5 και στη γραμμή 6:

 .item8 {
    
  grid-area: 1 / 2 / 5 / 6;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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;
}

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is:</p>
<p>grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 will start on row-line 1 and column-line 2, and end on row-line 5 column-line 6:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
  <div class="item14">14</div>
  <div class="item15">15</div>
</div>

</body>
</html>

Παράδειγμα

Κάντε το "item8" να ξεκινά από τη γραμμή-γραμμή 2 και στήλη-γραμμή 1 και να εκτείνεται σε 2 σειρές και 3 στήλες:

 .item8 {
    
  grid-area: 2 / 1 / span 2 / span 3;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto 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;
}

.item8 {
  grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>

<h1>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to specify where to place an item.</p>

<p>The syntax is grid-row-start / grid-column-start / grid-row-end / grid-column-end.</p>

<p>Item8 will start on row-line 2 and column-line 1, and span 2 rows and 3 columns:</p>

<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 class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
  <div class="item13">13</div>
</div>

</body>
</html>

Ονομασία στοιχείων πλέγματος

Η ιδιότητα grid-area μπορεί επίσης να χρησιμοποιηθεί για την εκχώρηση ονομάτων σε στοιχεία πλέγματος.

Header

Main

Right

Footer

Τα επώνυμα στοιχεία πλέγματος μπορούν να αναφέρονται από την ιδιότητα grid-template-areas του κοντέινερ πλέγματος.

Παράδειγμα

Το στοιχείο 1 παίρνει το όνομα "myArea" και εκτείνεται και στις πέντε στήλες σε μια διάταξη πλέγματος πέντε στηλών:

 .item1 {
  grid-area: 
  myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea 
  myArea myArea myArea';
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea myArea myArea myArea';
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of all five columns:</p>

<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>

</body>
</html>

Κάθε σειρά ορίζεται με απόστροφα (' ')

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

Σημείωση: Ένα σύμβολο τελείας αντιπροσωπεύει ένα στοιχείο πλέγματος χωρίς όνομα.

Παράδειγμα

Αφήστε το "myArea" να εκτείνεται σε δύο στήλες σε διάταξη πλέγματος πέντε στηλών (σύμβολα περιόδου αντιπροσωπεύουν στοιχεία χωρίς όνομα):

 .item1 {
  grid-area: 
  myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea 
  . . .';
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .';
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of two columns (out of five):</p>

<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 class="item9">9</div>
</div>

</body>
</html>

Για να ορίσετε δύο σειρές, ορίστε τη στήλη της δεύτερης σειράς μέσα σε ένα άλλο σύνολο αποστρόφων:

Παράδειγμα

Κάντε το "item1" να εκτείνεται σε δύο στήλες και δύο σειρές:

 .grid-container {
  grid-template-areas: 'myArea myArea 
  . . .' 'myArea myArea . . .';
}

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

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>Item1, is called "myArea" and will take up the place of two columns (out of five), and will span two rows:</p>

<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>

</body>
</html>

Παράδειγμα

Ονομάστε όλα τα στοιχεία και φτιάξτε ένα έτοιμο προς χρήση πρότυπο ιστοσελίδας:

 .item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { 
  grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: 
  footer; }
.grid-container {
  grid-template-areas:
    
  'header header header header header header'
    'menu main 
  main main right right'
    'menu footer footer footer footer 
  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>The grid-area Property</h1>

<p>You can use the <em>grid-area</em> property to name grid items.</p>

<p>You can refer to the name when you set up the grid layout, by using the <em>grid-template-areas</em> property on the grid container.</p>

<p>This grid layout contains six columns and three rows:</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>

Η σειρά των αντικειμένων

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

Το πρώτο στοιχείο στον κώδικα HTML δεν χρειάζεται να εμφανίζεται ως το πρώτο στοιχείο στο πλέγμα.

1

2

3

4

5

6

Παράδειγμα

 .item1 { grid-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
  .item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
  .item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 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-area: 1 / 3 / 2 / 4; }
.item2 { grid-area: 2 / 3 / 3 / 4; }
.item3 { grid-area: 1 / 1 / 2 / 2; }
.item4 { grid-area: 1 / 2 / 2 / 3; }
.item5 { grid-area: 2 / 1 / 3 / 2; }
.item6 { grid-area: 2 / 2 / 3 / 3; }
</style>
</head>
<body>

<h1>Sort the Items</h1>

<p>The grid items do not have to be displayed in the same order as they are written in the HTML code.</p>

<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>

</body>
</html>

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

Παράδειγμα

 @media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / 
  span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / 
  span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 
  { grid-area: 2 / 3 / 3 / 4; }
}

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

<!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;
}

@media only screen and (max-width: 500px) {
  .item1 { grid-area: 1 / span 3 / 2 / 4; }
  .item2 { grid-area: 3 / 3 / 4 / 4; }
  .item3 { grid-area: 2 / 1 / 3 / 2; }
  .item4 { grid-area: 2 / 2 / span 2 / 3; }
  .item5 { grid-area: 3 / 1 / 4 / 2; }
  .item6 { grid-area: 2 / 3 / 3 / 4; }
}
</style>
</head>
<body>

<h1>Re-arange the Order on Small Devices</h1>

<p>Resize the window to 500 pixels see the effect.</p>

<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>

</body>
</html>