Saltar a:

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

CSS grid es definido usando el valor grid en la propiedad display; puedes definir columnas y filas en tu diseño grid, con las propiedades  grid-template-rows y grid-template-columns .

El grid que configures usando estas propiedades es definido como la grilla explícita (explicit grid).

Si colocas contenido fuera de esta cuadrícula explícita, o si confías en la ubicación automática y el algoritmo de cuadrícula necesita crear tracks de filas o columnas adicionales para contener grid items, luego se crearán pistas adicionales en la cuadrícula implícita. La cuadrícula implícita es la cuadrícula creada automáticamente debido al contenido que se agrega fuera de las pistas definidas.    

En el siguiente ejemplo, he creado una grilla explícita de tres columnas y dos filas. La tercera fila en la cuadrícula es una pista de la fila de la grilla implícita, formada debido a que son más de seis los elementos que llenan las pistas explícitas.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}
<div class="wrapper">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
</div>

Aprende Más

Referencia de propiedades

Otras lecturas

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: ocamachor, tipoqueno, welm
Última actualización por: ocamachor,