CSS Grid Item

1
2
3
4
5

Probeer het zelf

Onderliggende elementen (projecten)

Een rastercontainer bevat rasterprojecten.

Standaard heeft de container in elke rij en kolom een rasterproject, maar u kunt de stijl van de rasterprojecten instellen zodat ze meerdere kolommen en/or rijen overspannen.

grid-column eigenschap:

grid-column Deze eigenschap definieert op welke kolom het project wordt geplaatst.

U kunt de start- en eindpositie van het item definiëren.

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

Opmerking:grid-column Eigenschappen zijn afkortingseigenschappen van grid-column-start en grid-column-end eigenschappen.

Als u een project wilt plaatsen, kunt u verwijzen naar de regelnummers (line numbers) of gebruik het keyword 'span' om aan te geven hoeveel kolommen het project overspant.

Voorbeeld

Maak "item1" van de 1e kolom begint en eindigt voor de 5e kolom:

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

Probeer het zelf

Voorbeeld

Maak "item1" van de 1e kolom begint en beslaat 3 kolommen:

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

Probeer het zelf

Voorbeeld

Maak "item2" van de 2e kolom begint en beslaat 3 kolommen:

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

Probeer het zelf

grid-row eigenschap:

grid-row Eigenschappen definiëren waar het item op de rij wordt geplaatst.

U kunt de start- en eindpositie van het item definiëren.

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

Opmerking:grid-row Eigenschappen zijn een verkorte eigenschap van grid-row-start en grid-row-end eigenschappen.

Voor het plaatsen van items kunt u de rijnummers verwijzen of het gebruik van de sleutelwoorden "span" om te definiëren hoeveel rijen het item zal overspannen:

Voorbeeld

Maak "item1" begint op row-line 1 en eindigt op row-line 4:

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

Probeer het zelf

Voorbeeld

Maak "item1" van de 1e rij begint en beslaat 2 rijen:

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

Probeer het zelf

grid-area eigenschap

grid-area Eigenschappen kunnen worden gebruikt als een verkorte eigenschap van grid-row-start, grid-column-start, grid-row-end en grid-column-end eigenschappen.

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

Voorbeeld

Maak "item8" van row-line 1 en column-line 2 begint en eindigt op row-line 5 en column line 6:

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

Probeer het zelf

Voorbeeld

Maak "item8" van row-line 2 en column-line begint en beslaat 2 rijen en 3 kolommen:

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

Probeer het zelf

Genaamd rasteritem

grid-area Eigenschappen kunnen ook worden gebruikt om namen toe te wijzen aan rasterprojecten.

Header
Menu
Main
Right
Footer

kan worden gebruikt om de naam van het rastercontainer toe te wijzen. grid-template-areas Eigenschappen om genaamd rasterprojecten te verwijzen.

Voorbeeld

De naam van item1 is "myArea" en beslaat alle vijf kolommen van het rasterontwerp:

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

Probeer het zelf

Elke rij wordt gedefinieerd door aanhalingstekens (' ').

De kolommen in elke rij worden binnen aanhalingstekens gedefinieerd en gescheiden door spaties.

Opmerking:Puntjes vertegenwoordigen rasteritems zonder naam.

Voorbeeld

Laat 'myArea' over twee kolommen in het vijf kolommen tellende rasterindeling overschrijden (puntjes vertegenwoordigen items zonder naam):

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

Probeer het zelf

Om twee rijen te definiëren, definieer de kolommen van de tweede rij in een ander reeksje aanhalingstekens:

Voorbeeld

Om 'item1' over twee kolommen en twee rijen te laten overschrijden:

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

Probeer het zelf

Voorbeeld

Naam alle items en maak een webpagina-sjabloon die altijd beschikbaar is:

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

Probeer het zelf

Volgorde van items

De rasterindeling staat ons toe om items te plaatsen op elke willekeurige locatie die we leuk vinden.

Het eerste item in de HTML-code hoeft niet als het eerste item in het raster te worden weergegeven.

1
2
3
4
5
6

Voorbeeld

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

Probeer het zelf

U kunt de volgorde van bepaalde schermgroottes wijzigen door media queries te gebruiken:

Voorbeeld

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

Probeer het zelf