CSS Grid Item

1
2
3
4
5

Try It Yourself

Δευτερεύοντες στοιχεία (στοιχεία)

Η κουτί κουτί περιέχει στοιχεία κουτί.

Σε προεπιλογή, ο κουτί περιέχει ένα στοιχείο σε κάθε στήλη της κάθε γραμμής, αλλά μπορείτε να ρυθμίσετε το στυλ των στοιχείων ώστε να καλύπτουν πολλαπλές στήλες και/ή γραμμές.

Ιδιότητα grid-column:

grid-column Η ιδιότητα καθορίζει σε ποια στήλη θα τοποθετηθεί το στοιχείο.

μπορείτε να ορίσετε την αρχική και τελική θέση του αντικειμένου.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Note:grid-column Οι ιδιότητες είναι οι συντομεύσεις των ιδιοτήτων grid-column-start και grid-column-end.

Για να τοποθετήσετε ένα στοιχείο, μπορείτε να αναφέρετε τον αριθμό της γραμμής (line numbers) ή να χρησιμοποιήσετε το κλειδί "span" για να καθορίσετε πόσα στήλες θα καλύπτει το στοιχείο.

Example

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

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

Try It Yourself

Example

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

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

Try It Yourself

Example

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

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

Try It Yourself

ιδιότητα grid-row:

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

μπορείτε να ορίσετε την αρχική και τελική θέση του αντικειμένου.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Note:grid-row η ιδιότητα είναι συντομευμένη ιδιότητα των ιδιοτήτων grid-row-start και grid-row-end.

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

Example

να κάνει το "item1" να ξεκινά από την row-line 1 και να τελειώνει στην row-line 4:

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

Try It Yourself

Example

να κάνει το "item1" να ξεκινά από την γραμμή 1 και να καλύπτει 2 γραμμές:

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

Try It Yourself

ιδιότητα grid-area

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

Example

να κάνει το "item8" να ξεκινά από την row-line 1 και την column-line 2 και να τελειώνει στην row-line 5 και την column line 6:

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

Try It Yourself

Example

να κάνει το "item8" να ξεκινά από την row-line 2 και την column-line και να καλύπτει 2 γραμμές και 3 στήλες:

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

Try It Yourself

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

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

Header
Menu
Main
Right
Footer

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

Example

το όνομα του item1 είναι "myArea" και καλύπτει όλα τα πέντε στήλες της διάταξης της πλέγματος.

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

Try It Yourself

Each row is defined by an apostrophe ('').

Each column in a row is defined within apostrophes and separated by spaces.

Note:Dots represent grid items without names.

Example

Let 'myArea' span two columns in the five-column grid layout (dots represent items without names):

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

Try It Yourself

To define two rows, define the columns of the second row within another set of apostrophes:

Example

To make 'item1' span two columns and two rows:

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

Try It Yourself

Example

Name all items and create a web page template that is always ready to use:

.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';
}

Try It Yourself

The order of items

The grid layout allows us to place items in any position we like.

The first item in the HTML code does not have to be displayed as the first item in the grid.

1
2
3
4
5
6

Example

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

Try It Yourself

You can rearrange the order of certain screen sizes by using media queries:

Example

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

Try It Yourself