grid

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

A propriedade grid do CSS é uma abreviação das propriedades que definem todas as propriedades da grade explícita (grid-template-rows, grid-template-columns, e grid-template-areas (en-US)), e todas as propriedades implícitas da grade (grid-auto-rows (en-US), grid-auto-columns (en-US), e grid-auto-flow), em uma única declaração.

Experimente

Nota: Você pode especificar apenas as propriedades explícitas ou implícitas da grade em uma única declaração grid. As subpropriedades que você não especifica são definidas como seu valor inicial, como é normal para abreviações. Além disso, as propriedades da medianiz NÃO são redefinidas por essa abreviação.

Sintaxe

css
/* <'grid-template'> values */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Valores

<'grid-template'>

Define o grid-template (en-US) incluindo grid-template-columns, grid-template-rows e grid-template-areas (en-US).

<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

Configura um fluxo automático definindo as faixas de linha explicitamente por meio da propriedade grid-template-rows (e a propriedade grid-template-columns para none) e especificando como repetir automaticamente as faixas da coluna via grid-auto-columns (en-US) (e setando grid-auto-rows (en-US) para auto). grid-auto-flow também é definido para a column, de acordo com dense, se especificado.

Todas as outras subpropriedades grid são redefinidas para seus valores iniciais.

[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

Configura um fluxo automático definindo as faixas da coluna explicitamente por meio da propriedade grid-template-columns (e a propriedade grid-template-rows para none) e especificando como repetir automaticamente as faixas de linha via grid-auto-rows (en-US) (e setando grid-auto-columns (en-US) para auto). grid-auto-flow também é definido para row de acordo com dense, se especificado.

Todas as outras subpropriedades grid são redefinidas para seus valores iniciais.

Sintaxe formal

grid = 
  <'grid-template'>                                   | (en-US)
  <'grid-template-rows'> / [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-columns'>? (en-US)  | (en-US)
  [ (en-US) auto-flow && (en-US) dense? (en-US) ] (en-US) <'grid-auto-rows'>? (en-US) / <'grid-template-columns'>

Exemplo

Conteúdo HTML

html
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Conteúdo CSS

css
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Resultado

Especificações

Specification
CSS Grid Layout Module Level 2
# grid-shorthand
Initial valueas each of the properties of the shorthand:
Aplica-se agrid containers
Inheritednão
Percentagesas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
Animation type (en-US)as each of the properties of the shorthand:

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também

  1. CSS
  2. CSS Reference
  3. CSS Grid Layout
  4. Guias
    1. Basics concepts of grid layout
    2. Relationship to other layout methods
    3. Line-based placement (en-US)
    4. Grid template areas (en-US)
    5. Layout using named grid lines (en-US)
    6. Auto-placement in grid layout (en-US)
    7. Box alignment in grid layout (en-US)
    8. Grids, logical values and writing modes (en-US)
    9. CSS Grid Layout and Accessibility (en-US)
    10. CSS Grid Layout and Progressive Enhancement (en-US)
    11. Realizing common layouts using grids (en-US)
  5. Propriedades
    1. grid
    2. grid-area (en-US)
    3. grid-auto-columns (en-US)
    4. grid-auto-flow
    5. grid-auto-rows (en-US)
    6. grid-column (en-US)
    7. grid-column-end (en-US)
    8. grid-column-gap (en-US)
    9. grid-column-start (en-US)
    10. grid-gap (en-US)
    11. grid-row (en-US)
    12. grid-row-end (en-US)
    13. grid-row-gap (en-US)
    14. grid-row-start (en-US)
    15. grid-template (en-US)
    16. grid-template-areas (en-US)
    17. grid-template-columns
    18. grid-template-rows
  6. Glossário
    1. Grid lines (en-US)
    2. Grid tracks (en-US)
    3. Grid cell (en-US)
    4. Grid areas
    5. Gutters (en-US)
    6. Grid row (en-US)
    7. Grid column (en-US)