CSS gitterelement

1
2
3
4
5

Prøv det selv

Underliggende elementer (projekter)

Gitterbeholderen indeholder gitterprojekter.

Som standard har beholderen en gitterprojekt i hver kolonne i hver række, men du kan indstille gitterprojekternes stil, så de krydser flere kolonner og/eller rækker.

grid-column egenskab:

grid-column Egenskaben definerer, hvor projektet skal placeres i kolonnen.

Du kan definere projektets start- og slutposition.

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

Bemærk:grid-column Egenskaber er en forkortelse af grid-column-start- og grid-column-end-egenskaberne.

Hvis du vil placere et projekt, kan du citere rækkefølgen (line numbers) eller bruge nøgleordet "span" for at definere, hvor mange kolonner projektet skal krydse.

Eksempel

gør "item1" starter fra den første kolonne og slutter før den femte kolonne:

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

Prøv det selv

Eksempel

gør "item1" starter fra den første kolonne og strækker sig over 3 kolonner:

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

Prøv det selv

Eksempel

gør "item2" starter fra den anden kolonne og strækker sig over 3 kolonner:

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

Prøv det selv

grid-row egenskab:

grid-row egenskab definerer, hvor projektet skal placeres i rækken.

Du kan definere projektets start- og slutposition.

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

Bemærk:grid-row egenskab er en kortform af grid-row-start og grid-row-end egenskaber.

Hvis du vil placere et projekt, kan du referere til række nummeret, eller bruge nøgleordet "span" for at definere, hvor mange rækker projektet skal strække sig over:

Eksempel

gør "item1" starter fra row-line 1 og slutter ved row-line 4:

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

Prøv det selv

Eksempel

gør "item1" starter fra den første række og strækker sig over 2 rækker:

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

Prøv det selv

grid-area egenskab

grid-area egenskab kan bruges som en kortform af grid-row-start, grid-column-start, grid-row-end og grid-column-end egenskaber.

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

Eksempel

gør "item8" fra row-line 1 og column-line 2 starter, og slutter ved row-line 5 og column line 6:

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

Prøv det selv

Eksempel

gør "item8" fra row-line 2 og column-line starter, og strækker sig over 2 rækker og 3 kolonner:

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

Prøv det selv

Navngiv firkantemål

grid-area egenskab kan også bruges til at tildele navne til firkantemål.

Header
Menu
Main
Right
Footer

kan bruges gennem firkantkassens grid-template-areas egenskab til at referere til navngivne firkantemål.

Eksempel

item1 navn er "minområde" og strækker sig over alle fem kolonner i firkantmållayoutet:

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

Prøv det selv

Hver række defineres af citationstegn (' ').

Kolonner i hver række defineres inden for citationstegn og adskilles af mellemrum.

Bemærk:Punkter repræsenterer netværksprojekter uden navn.

Eksempel

Lad 'myArea' krydse to kolonner i et femkolonnerigt netværkslayout (punkter repræsenterer elementer uden navn):

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

Prøv det selv

For at definere to rækker, definer anden række af kolonner i et andet sæt af citationstegn:

Eksempel

Lad 'item1' krydse to kolonner og to rækker:

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

Prøv det selv

Eksempel

Navngiv alle elementer og lav et webstedsarkiv, der er tilgængeligt på et øjeblik:

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

Prøv det selv

Rækkefølgen af elementerne

Netværkslayouten tillader os at placere elementerne på de steder, vi ønsker.

Det første element i HTML-koden behøver ikke at vises som det første element i netværket.

1
2
3
4
5
6

Eksempel

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

Prøv det selv

Du kan sortere rækkefølgen af visse skærmstørrelser ved hjælp af medieforespørgsler:

Eksempel

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

Prøv det selv