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

Saltar a:

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

CSS grid es definida usando el valor grid en la propiedad display; puedes definir el numero de columnas y filas usadas en tu maquetación con las propiedades  grid-template-rows y grid-template-columns .

La maquetación que defines usando estas propiedades es descrita como la cuadrícula explícita.

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

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