Scribd
Cargar
80 vistas18 páginas

Guía de CSS para Display Grid

El documento explica cómo crear una cuadrícula con CSS Grid Layout. Se define un contenedor con display: grid y luego se especifican el número de filas y columnas con grid-template-columns y grid-template-rows. Se pueden alinear y distribuir los elementos de la cuadrícula dentro del contenedor usando propiedades como justify-items, align-items, justify-content y align-content.

Cargado por

Cristian
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
80 vistas18 páginas

Guía de CSS para Display Grid

El documento explica cómo crear una cuadrícula con CSS Grid Layout. Se define un contenedor con display: grid y luego se especifican el número de filas y columnas con grid-template-columns y grid-template-rows. Se pueden alinear y distribuir los elementos de la cuadrícula dentro del contenedor usando propiedades como justify-items, align-items, justify-content y align-content.

Cargado por

Cristian
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

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
[Link]
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

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.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
2 formas de escribir lo mismo.
grid-column-start: 1; grid-column-end: 3; grid-row-start:2; grid-row-end:4; grid-column: 1 / 3; grid-row: 2 / 4; 3. Defin
Estableceremos la anchura y altura de las celdas con: grid-template-columns grid-template-rows En este caso serían 2 co

También podría gustarte