CSS grid-element

1
2
3
4
5

Prova själv

Underliggande element (objekt)

Rutmappningsbehållaren innehåller rutmappningsobjekt.

Som standard har behållaren en rutmappningsobjekt i varje kolumn i varje rad, men du kan ställa in stilen på rutmappningsobjekten så att de korsar flera kolumner och/eller rader.

grid-column egenskapen:

grid-column Egenskapen definierar var projektet placeras i kolumnen.

Du kan definiera objektets början och slutposition.

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

Kommentar:grid-column Egenskaper är en förkortning av grid-column-start och grid-column-end egenskaper.

Om du vill placera ett projekt, kan du hänvisa till radnummer (line numbers) eller använda nyckelordet "span" för att definiera hur många kolumner projektet kommer att korsa.

Exempel

gör "item1" från första kolumnen och slutar innan femte kolumnen:

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

Prova själv

Exempel

gör "item1" från första kolumnen och täcker 3 kolumner:

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

Prova själv

Exempel

gör "item2" från andra kolumnen och täcker 3 kolumner:

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

Prova själv

grid-row egenskap:

grid-row egenskapen definierar vilket rad som objektet ska placeras på.

Du kan definiera objektets början och slutposition.

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

Kommentar:grid-row egenskapen är en förkortning för grid-row-start och grid-row-end egenskaper.

För att placera objekt kan du hänvisa till radnummer eller använda nyckelordet "span" för att definiera hur många rader objektet ska täcka:

Exempel

gör "item1" börjar vid radlinje 1 och slutar vid radlinje 4:

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

Prova själv

Exempel

gör "item1" från första raden och täcker 2 rader:

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

Prova själv

grid-area egenskap

grid-area egenskapen kan användas som en förkortning för grid-row-start, grid-column-start, grid-row-end och grid-column-end egenskaper.

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

Exempel

gör "item8" från radlinje 1 och kolumnlinje 2 börjar och slutar vid radlinje 5 och kolumnlinje 6:

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

Prova själv

Exempel

gör "item8" från radlinje 2 och kolumnlinje börjar och täcker 2 rader och 3 kolumner:

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

Prova själv

Namngivna rutnätselement

grid-area egenskap kan också användas för att tilldela namn till rutnätselement.

Header
Menu
Main
Right
Footer

kan användas genom nätverksbehållaren grid-template-areas egenskap för att hänvisa till namngivna rutnätselement.

Exempel

namnet på item1 är "minArea" och täcker alla fem kolumner i layouten av fem kolumner:

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

Prova själv

Varje rad definieras av citattecken (' ').

Kolumnerna i varje rad definieras inom citattecken och är avskilda av blanksteg.

Kommentar:Punkt innebär att det inte finns något namngivet nätverksobjekt.

Exempel

Låt "myArea" korsa två kolumner i femkolumns nätverkslayouten (punkt innebär att det inte finns något namngivet projekt):

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

Prova själv

För att definiera två rader, definiera den andra raden inom ett annat uppsättning av citattecken:

Exempel

För att låta "item1" korsa två kolumner och två rader:

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

Prova själv

Exempel

Namnge alla objekt och skapa ett webbtemplate som alltid är tillgängligt:

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

Prova själv

Objektets ordning

Grid Layout låter oss placera objekt på vilken plats vi vill.

Det första elementet i HTML-koden behöver inte visas som det första elementet i nätverket.

1
2
3
4
5
6

Exempel

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

Prova själv

Du kan använda media queries för att omordna ordningen av vissa skärmstorlekar:

Exempel

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

Prova själv