Propiedad CSS grid

La propiedad CSS grid es una propiedad abreviada para las siguientes propiedades:

Puede especificar propiedades de cuadrícula explícitas (grid-template-rows, grid-template-columns, grid-template-areas) o propiedades de cuadrícula implícitas (grid-auto-rows, grid-auto-columns, grid-auto-flow) en una sola declaración grid. La abreviatura asigna directamente estas subpropiedades, y cualquier subpropiedad omitida se restablece a sus valores iniciales.

Valor inicial	`none`
Se aplica a	Contenedores de cuadrícula.
Heredado	No.
Animable	Sí. El diseño de cuadrícula es animable.
Versión	Módulo de diseño de cuadrícula CSS Nivel 1
Sintaxis DOM	Object.style.grid = "150px / auto auto auto";

Sintaxis

Sintaxis de la propiedad CSS grid

css

grid: none | <grid-template-rows> / <grid-template-columns> | <grid-template-areas> | <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? | [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> | initial | inherit;

Ejemplo 1: Abreviatura básica de grid

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        background-color: #ccc;
        padding: 10px;
      }
      .grid-box {
        background-color: #eee;
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 30px;
        font-size: 30px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box">1</div>
      <div class="grid-box">2</div>
      <div class="grid-box">3</div>
      <div class="grid-box">4</div>
      <div class="grid-box">5</div>
      <div class="grid-box">6</div>
      <div class="grid-box">7</div>
      <div class="grid-box">8</div>
      <div class="grid-box">9</div>
    </div>
  </body>
</html>

Try it Yourself »

Ejemplo 2: Abreviatura de grid con auto-flow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-container {
        display: grid;
        grid: auto auto / auto-flow column auto auto auto;
        gap: 5px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 20px 0;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
    </div>
  </body>
</html>

Try it Yourself »

Resultado

Propiedad CSS grid

Ejemplo 3: Abreviatura de grid con tamaños de fila fijos

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .grid-box1 {
        grid-area: 1 / 1 / 2 / 2;
      }
      .grid-box2 {
        grid-area: 1 / 2 / 2 / 3;
      }
      .grid-box3 {
        grid-area: 1 / 3 / 2 / 4;
      }
      .grid-box4 {
        grid-area: 2 / 1 / 3 / 2;
      }
      .grid-box5 {
        grid-area: 2 / 2 / 3 / 3;
      }
      .grid-box6 {
        grid-area: 2 / 3 / 3 / 4;
      }
      .grid-container {
        display: grid;
        grid: 100px / auto auto auto;
        gap: 10px;
        background-color: #1c87c9;
        padding: 10px;
      }
      .grid-container > div {
        background-color: #eee;
        text-align: center;
        padding: 20px 0;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h2>Grid property example</h2>
    <div class="grid-container">
      <div class="grid-box1">1</div>
      <div class="grid-box2">2</div>
      <div class="grid-box3">3</div>
      <div class="grid-box4">4</div>
      <div class="grid-box5">5</div>
      <div class="grid-box6">6</div>
    </div>
  </body>
</html>

Try it Yourself »

Valores

Valor	Descripción	Probarlo
`none`	El tamaño de las columnas y filas no está especificado. Este es el valor predeterminado.
`grid-template-rows / grid-template-columns`	Especifica el tamaño de las filas y columnas.	Probarlo »
`grid-template-areas`	Especifica el diseño de la cuadrícula utilizando áreas de cuadrícula con nombre.	Probarlo »
`grid-template-rows / [auto-flow && dense?] grid-auto-columns`	Establece los tamaños de las filas y especifica el flujo automático y la colocación densa para las columnas.
`[auto-flow && dense?] grid-auto-rows / grid-template-columns`	Establece los tamaños de las columnas y especifica el flujo automático y la colocación densa para las filas.
`initial`	Restablece la propiedad a su valor predeterminado.
`inherit`	Hereda la propiedad del elemento principal.

Práctica

¿Qué puedes lograr usando CSS Grid Layout según el contenido de la página?

Crear páginas web con diseños complejos que sean responsivos y flexibles.Facilita la disposición o alineación de elementos.Elimina la necesidad de usar bibliotecas externas como Bootstrap para los diseños de maquetación.No se puede combinar con otros sistemas de diseño.El grid-container contiene la cuadrícula y ofrece varias propiedades para definir su comportamiento y límite exterior.

Propiedad CSS grid ​

Sintaxis ​

Ejemplo 1: Abreviatura básica de grid ​

Ejemplo 2: Abreviatura de grid con auto-flow ​

Resultado ​

Ejemplo 3: Abreviatura de grid con tamaños de fila fijos ​

Valores ​

Práctica ​

Propiedad CSS grid

Sintaxis

Ejemplo 1: Abreviatura básica de grid

Ejemplo 2: Abreviatura de grid con auto-flow

Resultado

Ejemplo 3: Abreviatura de grid con tamaños de fila fijos

Valores

Práctica