En esta lección te enseñaré las propiedades esenciales para construir tu Grid creando un layout básico desde cero, con HTML y CSS.
Esta lección incluye un video premium
Regístrate para ver este video y cientos de lecciones exclusivas.
Notas: Ambar Quintana
Atributo display: grid
El atributo display: grid nos permite crear el contenedor de cuadrícula en un elemento, es decir, una vez que se ha declarado este atributo todos los hijos directos del elemento se convertirán en elementos de la cuadrícula:
.container {
display: grid;
}
Propiedad grid-template-columns
Esta propiedad nos permite definir cuántas columnas va a tener nuestro contenedor y qué tamaño tendrá cada una de ellas. Podemos especificar cualquier valor de longitud no negativo:
.container {
display: grid;
grid-template-columns: 250px 25% auto;
}
Propiedad grid-template-rows
La propiedad grid-template-rows nos permite definir cuántas filas va a tener nuestro contenedor y qué tamaño tendrá cada una de ellas. Podemos especificar cualquier valor de longitud no negativo:
.container {
display: grid;
grid-template-columns: 250px 25% auto;
grid-template-rows: 250px 100px;
}
Propiedad grid-gap
Nos permite especificar los espacios entre filas y columnas. Podemos agregar dos valores, el primero va a corresponder al espacio entre filas y el segundo el espacio entre las columnas:
.container {
display: grid;
grid-template-columns: 250px 25% auto;
grid-template-rows: 250px 100px;
grid-gap: 20px 10px;
}
También puedes usar un solo valor y se tomará como espacio entre filas y columnas.
En la nueva especificación de grid-gap el prefijo grid desaparece, sin embargo, te recomendamos usarlo hasta que todos los navegadores acepten esta actualización.
Unidad de medida fr
En CSS Grid se añadió una nueva unidad de longitud flexible llamada fr (FRACTION) la cual representa una fracción del espacio libre del contenedor:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
Puedes usarla tanto en los grid-template-columns como en los grid-template-rows.
Función repeat()
Esta función nos permite representar un fragmento repetido, es decir, con ella podemos indicar valores repetidos para escribir de una forma más compacta un gran número de columnas o filas que tienen un patrón recurrente.
Acepta dos valores, el número de veces que se va a repetir y la unidad a repetir:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Introducción a CSS Grid Lección siguiente Cómo posicionar elementos en un Grid Layout