We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade CSS grid-template-areas especifica grid areas nomeadas.

/* Keyword value */
grid-template-areas: none;

/* <string> values */
grid-template-areas: "a b";
grid-template-areas: "a b b"
                     "a c d";

/* Global values */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;

Essas áreas não estão associadas a nenhum item de grade específico, mas podem ser referenciadas a partir das propriedades da grid-placement, grid-row-start, grid-row-end, grid-column-start, grid-column-end, e seus atalhos grid-row, grid-column, and grid-area.

 

Initial valuenone
Aplica-se agrid containers
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

Values

none
The grid container doesn’t define any named grid areas.
<string>+
A row is created for every separate string listed, and a column is created for each cell in the string. Multiple named cell tokens within and between rows create a single named grid area that spans the corresponding grid cells. Unless those cells form a rectangle, the declaration is invalid.

Formal syntax

none | <string>+

Example

HTML

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>

CSS

#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}

Result

Specifications

Specification Status Comment
CSS Grid Layout
The definition of 'grid-template-areas' in that specification.
Candidata a Recomendação Initial definition

Browser compatibility

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support

57

291

16

52

402

No

44

283

10.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support57

57

291

16

52

402

4410.36.0

1. From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.

2. From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

3. From version 28: this feature is behind the Enable experimental Web Platform features preference.

 

See also

Etiquetas do documento e colaboradores

Colaboradores desta página: angelorubin
Última atualização por: angelorubin,