CSS grid-area eigenschap

Definitie en gebruik

De eigenschap grid-area van het rasteritem's formaat en positie in het rasterontwerp, het is een verkorte eigenschap van de volgende eigenschappen:

De eigenschap grid-area kan ook worden gebruikt om een naam toe te wijzen aan een rasteritem. Vervolgens kan deze naam worden gebruikt via de grid-template-areas Gebruik de eigenschap "grid-item" genaamd. Zie het volgende voorbeeld.

Zie ook:

CSS handleiding:CSS rasterontwerp

Voorbeeld

Voorbeeld 1

Maak "item1" begint op rij 2 kolom 1 en overspant twee rijen en drie kolommen:

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

Probeer het zelf uit

Tip:Meer voorbeelden zijn beschikbaar aan de onderkant van de pagina.

CSS syntaxis

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

Eigenschapswaarde

Waarde Beschrijving
grid-row-start Bepaal van welke rij de item wordt weergegeven.
grid-column-start Bepaal van welke kolom de item wordt weergegeven.
grid-row-end Stelt op welke rijlijn het item stopt met weergeven, of hoeveel rijen het overspant.
grid-column-end Specificeer op welke kolomlijn het item stopt met weergeven, of hoeveel kolommen het overspant.
itemname Stelt de projecten van het rasterproject voor.

Technische details

Standaardwaarde: auto / auto / auto / auto
Inherits: Nee
Animatieproductie: Ondersteund. Raadpleeg:Animatiegerelateerde eigenschappen.
Versie: CSS Grid Layout Module Level 1
JavaScript syntax: object.style.gridArea="1 / 2 / span 2 / span 3"

Meer voorbeelden

Voorbeeld 2

Item1 wordt genoemd 'myArea' en loopt over alle vijf kolommen in een vijf kolommen rasterlay-out:

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

Probeer het zelf uit

Voorbeeld 3

Maak 'myArea' over twee kolommen lopen in een vijf kolommen rasterlay-out (puntjes betekenen dat er geen naam voor het item is):

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

Probeer het zelf uit

Voorbeeld 4

Maak 'item1' over twee kolommen en twee rijen heen lopen:

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

Probeer het zelf uit

Voorbeeld 5

Naam alle items en maak een voorafgemaakte webpagina-sjabloon:

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

Browserondersteuning

De cijfers in de tabel vermelden de eerste browserversie die deze eigenschap volledig ondersteunt.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44