Scribd
Cargar
100 vistas

Grid

El documento explica cómo crear una cuadrícula (grid) en CSS. Se define un contenedor con la propiedad display: grid y luego se especifican el número de columnas y filas con grid-template-columns y grid-template-rows. Se pueden definir el tamaño y posición de cada elemento de la cuadrícula y añadir espaciado entre columnas y filas. Adicionalmente, se pueden alinear y distribuir los elementos dentro del contenedor con propiedades como justify-items y align-items.

Cargado por

Ligia Mesa
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
100 vistas

Grid

El documento explica cómo crear una cuadrícula (grid) en CSS. Se define un contenedor con la propiedad display: grid y luego se especifican el número de columnas y filas con grid-template-columns y grid-template-rows. Se pueden definir el tamaño y posición de cada elemento de la cuadrícula y añadir espaciado entre columnas y filas. Adicionalmente, se pueden alinear y distribuir los elementos dentro del contenedor con propiedades como justify-items y align-items.

Cargado por

Ligia Mesa
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

Display: grid

1. Crear un contenedor en html y darle la


propiedad display: grid en el css
2. Definir (en el contenedor) el número de
columnas y filas que va a tener con:

grid-template-colums { }
Indica el núm. de columnas que va a tener

grid-template-rows { }
Indica el núm. de filas que va a tener
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
2 formas de escribir lo mismo.
3. Definir (en cada grid ítem) el número de columnas
y filas que va a ocupar con:

grid-column-start: 1;
grid-column-end: 3;

grid-row-start:2;
grid-row-end:4;

grid-column: 1 / 3;
grid-row: 2 / 4;
Estableceremos la anchura
y altura de las celdas con:

grid-template-columns
grid-template-rows

En este caso serían 2


columnas y 3 filas.

.grid { grid-template-columns: 1fr 1fr;


grid-template-rows: 1fr 1fr 1fr; }
4. Si queremos separación entra las columnas
y filas la definiremos con:

column-gap { 10px; }
Indica el espaciado entre columnas

row-gap { 15px; }
Indica el espaciado entre filas

O lo que es lo mismo:

gap { 15px 10px; }


5. Distribuiremos horizontalmente los grid-
items respecto del grid-container con:

justify-items

.container {
justify-items: start;
}

.container {
justify-items: end;
}
.container {
justify-items: center;
}

.container {
justify-items: stretch;
}

Podemos colocar un solo item con:

.item-a {
justify-self: start;
}
6. Distribuiremos verticalmente los grid-items
respecto del grid-container con:

align-items

.container {
align-items: start;
}

.container {
align-items: end;
}
.container {
align-items: center;
}

.container {
align-items: stretch;
}

Podemos alinear un solo item con:

.item-a {
align-self: start;
}
A veces, el tamaño total de la cuadrícula puede ser menor
que el tamaño del grid container.

En este caso, puede establecer la alineación de la


cuadrícula dentro del grid container con justify-content.
Esta propiedad alinea la cuadrícula a lo largo del eje en
línea (fila) (a diferencia de align-content que alinea la
cuadrícula a lo largo del eje del bloque (columna)).
justify-content
align-content

También podría gustarte