Bernardo Martín
UI Developer | CSS & Animation Developer | Frontend Developer
CSS GRID
CSS GRID
La forma de enmaquetar nuestros proyectos ha ido cambiando a lo largo de los años.
- Una sola columna
- Tablas
- Floats
- Flex https://bermartinv.github.io/css/files/taller/flex/flex.html
- Grid view propios http://slides.com/bermartinv/deck-6#/
CSS GRID
Actualmente aparece una nueva característica CSS y toca ponerse al día, ya que es compatible en practicamente en todos los navegadores en las versiones actualizadas
Con Grid podemos crear una rejilla donde podemos colocar nuestras etiquetas HTML en distinto orden al que se encuentra en el DOM.
En nuestro estándar de diseño podemos usar a la vez flex y grid.
1. Características para el elemento padre
grid / inline-grid / subgrid
Empezamos a etiquetar nuestro diseño grid.
display : grid; se crean un solo contenedor
display: inline-grid; se crea en fila contenedores grid
display: subgrid; se crea un contenedor grid dentro de otro
Creamos el elemento que hará de rejilla / contenedor donde se crearán los elementos hijos. Esto se llamará grid context . Podemos diseñar nuestra rejilla de varias maneras.
Tener en cuenta que las características CSS column, float, clear, vertical-align no tienen efecto en el contenedor grid.
grid-template-colums / grid-template-rows
El contenedor grid está formado por la línea horizontal representado por el eje X y por una línea vertical representada por el eje Y. Por lo que podemos decir que a diferencia de flex, el diseño grid está formado en 2 dimensiones.
grid-template-columns :; define el diseño en el eje Y
grid-template-rows:; define el diseño en el eje X
Con sus valores definimos las filas o columnas que queremos con su tamaño y su nombre
grid-template-columns : [columna1] 200px [columna2] 30%;
grid-template-rows: repeat(3, 20px [filas]) 5%;
grid-template-colums / grid-template-rows
Con los valores definimos las filas o columnas que queremos con su tamaño y su nombre
grid-template-columns : [columna1] 200px [columna2] 30%; se crean dos columnas, una de 200px y otra el 30% del viewport
grid-template-rows: 1fr 1fr 1fr; se divide en tres partes iguales las tres filas definidas
grid-template-rows: repeat(3, 20px [filas]) 5%; se crean 3 filas de 20px con 5% separacion
grid-template-columns: minmax(100px,300px) 1fr 1fr; especifica que el tamaño puede ser de 100px a 300px según el viewport
grid-template-rows: minmax(100px,auto); especifica que el tamaño oscila de 100 a auto
grid-template-colums: repeat(auto-fill, 200px); se rellena el viewport con tantas columnas de 200px hasta completar su espacio
git-template-rows: repeat(auto-fill,minmax(100px,1fr)); tantas columnas hasta completar el viewport de un ancho 100px o flexible
grid-template-colums / grid-template-rows
Si usamos la medida auto para definir la rejilla, el espacio se dividirá equitativamente entre las rejillas que haya.
grid-template-columns : auto auto auto; se divide el espacio total que haya entre tres. Aunque parezca parecido a fr no es lo mismo. fr tiene preferencia sobre auto, y si hubiese las dos unidades juntas, fr se llevaría todo el espacio posible y auto tendría el espacio suficiente para mostrar el contenido del grid-cell.
grid-template-colums / grid-template-rows
Si usamos la medida repeat para definir la rejilla, podemos indicar que una medida se repita en varias situaciones según la cantidad indicada.
grid-template-columns : repeat(6, 1fr); Se forma una rejilla que estará formada por seis columnas y cada una estará formada por una fracción del ancho total del viewport.
grid-template-colums / grid-template-rows
Si usamos la medida minmax para definir la rejilla dandole una medida como mínimo y una medida como máximo, el espacio se dividirá equitativamente entre las rejillas que haya.
grid-template-columns : minmax(400px,1fr) 1fr; se divide el espacio total que haya entre dos columnas. La primera columna tendrá como máximo 1fr y como mínimo 400px segun el tamaño del viewport , y la segunda columna ocupará 1fr.
El ancho de la columna o fila puede venir determinado por el contenido, tanto la parte mínima o la máxima. Usaremos min-content y max-content.
grid-template-columns : minmax(min-content,max-content) 1fr; se divide el espacio total que haya entre dos columnas. La primera columna estará delimitada por su contenido mínimo y su contenido máximo, y la segunda columna ocupará 1fr.
grid-template-colums / grid-template-rows
Se pueden combinar palabras especiales como minmax, repeat para formar una combinación de las columnas.
grid-template-columns : repeat(4,
minmax(400px,1fr)
minmax(200px,1fr)
minmax(100px,150px)
); se repite cuatro veces la combinación de tres columnas, en las que la primera columna tendrá como mínimo 400 px y como máximo 1fr, y la segunda columna contendrá un mínimo de 200px y máximo 1fr, y la tercera columna tendrá como mínimo 100px y máximo 150px.
grid-template-colums / grid-template-rows
Se pueden combinar palabras especiales como auto-fill, auto-fit, repeat para formar una combinación de las columnas.
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
con auto-fill , convierte la rejilla con las medidas dadas aún si no hay bastantes grids sus huecos quedan sin ocupar.
con auto-fit, crea tantos grid como quepan y según el espacio que sobre o falte convierte cada grid con la medida resultante.
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
esto puede provocar overflow en el viewport pero podemos hacer
grid-template-columns: repeat(auto-fill,minmax(min(100%,25rem),1fr));
grid-template-colums / grid-template-rows
También podemos usar la propiedad fit-content(), ajusta un tamaño dado a un tamaño disponible de acuerdo a la fórmula min(maximum size, max(minimum size, argument)), que se calcula de forma similar a auto (es decir, minmax (auto, max-content)), excepto que el tamaño de la pista se fija en el argumento si es mayor que el mínimo automático.
grid-template-columns: fit-content(100px) 150px 150px 150px;
grid-template-areas
Define una plantilla de cuadrícula haciendo referencia a los nombres de las áreas de rejilla que se especifican con la propiedad grid-area. Al repetir el nombre de un área de cuadrícula, el contenido abarcará esas celdas. Un período significa una celda vacía. La sintaxis en sí proporciona una visualización de la estructura de la cuadrícula.
Definiremos independientemente el eje X y el eje Y, después nos encargaremos de definir la estructura de la rejilla.
grid-template-areas
Los valores que puede aceptar son los nombres de los grid-area que hayas definido y en el caso que queramos que una sección quede sin definir usaremos el . .
#page{
display:grid;
width:100%;
height:300px;
grid-template-columns: 150px 1fr;
grid-template-rows: 50px 1fr 30px 50px 40px;
grid-template-areas: "header header"
"nav main"
"nav main"
"nav footer"
" . footer";
}
El punto . indica que esa celda quede vacía.
grid-area
Los grid-area serán los nombres que daremos a los hijos que están contenidos dentro de nuestro bloque.
Los podemos definir:
- Nombre que nosotros queramos darle. grid-area: <name>;
grid-template
Sirve como abreviación para definir grid-template-rows, grid-template-columns, grid-template-areas.
.container { grid-template: [row1-start] 25px "header header header" [row1-end]
[row2-start] "footer footer footer" 25px [row2-end] / auto 50px auto; }
.container { grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas: "header header header" "footer footer footer"; }
grid-column-gap/grid-row-gap
Con estas características definimos el espacio que queremos que quede entre rejilla y rejilla ya sea verticalmente con grid-column-gap o horizontalmente con grid-row-gap.
mo abreviación para definir grid-template-rows, grid-template-columns, grid-template-areas.
Para definir ambas características tendremos que indicar el tamaño del espacio que queremos, ya sea en px o en otra unidad.
grid-gap
La forma abreviada de definir las dos características anteriores.
#grid{
grid-gap: <grid-row-gap> <grid-column-gap>;
}
justify-items
Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila (en oposición a alinear elementos que se alinean a lo largo del eje de la columna). Este valor se aplica a todos los elementos de cuadrícula dentro del contenedor.
Los valores posibles son:
- start
- end
- center
- stretch (valor por defecto)
justify-items: start | end | center | stretch ;
align-items
Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la columna (en oposición a los elementos de justificación que se alinean a lo largo del eje de la fila). Este valor se aplica a todos los elementos de cuadrícula dentro del contenedor.
Los valores posibles son:
- start
- end
- center
- stretch (valor por defecto)
justify-items: start | end | center | stretch ;
place-items
Esta es la propiedad shorthand de las dos propiedades anteriores ( justify-items, align-items)..
place-items: [start | end | center | stretch] | [start | end | center | stretch] ;
justify-content
A veces, el tamaño total de la cuadrícula puede ser menor que el tamaño de su contenedor de cuadrícula. Esto podría ocurrir si todos los elementos de la cuadrícula están dimensionados con unidades no flexibles como px. En este caso, puede configurar la alineación de la cuadrícula dentro del contenedor de cuadrícula. Esta propiedad alinea la cuadrícula a lo largo del eje de la fila (en contraposición al alinear el contenido que alinea la retícula a lo largo del eje de la columna).
Los valores posibles son:
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
align-content
A veces, el tamaño total de la cuadrícula puede ser menor que el tamaño de su contenedor de cuadrícula. Esto podría ocurrir si todos los elementos de la cuadrícula están dimensionados con unidades no flexibles como px. En este caso, puede configurar la alineación de la cuadrícula dentro del contenedor de cuadrícula. Esta propiedad alinea la cuadrícula a lo largo del eje de la columna (en oposición a justificar el contenido que alinea la cuadrícula a lo largo del eje de la fila).
Los valores posibles son:
- start
- end
- center
- stretch
- space-around
- space-between
- space-evenly
grid-auto-columns/grid-auto-rows
Se especifica de una forma automática la medida de todos los grid implícitos que no quedan definidos. Imagina que definimos dos columnas con unas medidas concretas (explícito), si tuviese mas elementos al no estar definidos serían implícitos y recibirían las medida que especificaramos con grid-auto-columns.
Las unidades que podemos usar son los px, el % y la fracción fr.
grid-auto-colums: 30x;
grid-auto-rows: 1fr;
grid-auto-flow
Especifica como colocaremos todos los elementos de nuestra rejilla grid. En un sentido horizontal (izq - der), vertical (arr - aba). Indicaremos dense si queremos que se rellenen huecos de nuestra rejilla.
Los valores posibles son:
- row
- column
- row-reverse
- column-reverse
- dense(rellena los huecos)
- row dense
- column dense
grid-auto-flow: <row> | <column> | <dense> | <row dense> | <column dense>
grid
También se puede utilizar la característica grid de una forma abreviada.
grid: none | <grid-template-rows> / <grid-template-columns> | <grid-auto-flow> [<grid-auto-rows> [/ <grid-auto-columns>]];
direction
Como es sabido por todos no en todos los continentes se escribe de izquierda a derecha, de ahí esta característica:
direction: ltr; left to right , de izquierda a derecha, por defecto
direction: rtl; right to left, de derecha a izquierda, por defecto
order
Como sucedía en flex podemos usar order para ordenar nuestra rejilla en el orden que queramos. El valor por defecto es 0, así si tenemos varias rejillas y una la ponemos a 1, esta aparecerá al final y si le ponemos el valor -1, estará al principio de todos.
2. Características para los elementos hijos
grid-column-start/grid-column-end/grid-row-start/grid-row-column
Utilizaremos estas características para situar en una determinada rejilla al elemento que queramos.
grid-column-start: <number> | <name> | span <number> | span <name> | auto
grid-column-end: <number> | <name> | span <number> | span <name> | auto
grid-row-start: <number> | <name> | span <number> | span <name> | auto grid-row-end: <number> | <name> | span <number> | span <name> | auto
El atributo span seguido de un número, indica el número de espacios o de columnas que ocupará este grid.
grid-column/grid-row
La forma abreviada para definir grid-column-start / grid-column-end y para grid-row-start / grid-row-end
grid-column: <start-line> / <end-line >(espacio que ocupará)
grid-row: <start-line> / <end-line> (espacio que ocupará)
Ejemplo : https://codepen.io/bermartinv/pen/jGyEJM
El valor -1 indica la última fila o la última columna dependiendo la característica que estemos definiendo.
grid-area
Usaremos esta característica para darle un nombre a cada rejilla de los elementos hijos .
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
justify-self
Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la fila (en oposición a alinear-self que se alinea a lo largo del eje de la columna). Este valor se aplica al contenido de un solo elemento de cuadrícula.
Los valores posibles son:
- start
- end
- center
- stretch
align-self
Alinea el contenido dentro de un elemento de cuadrícula a lo largo del eje de la columna (en oposición a justificar-self que se alinea a lo largo del eje de la fila). Este valor se aplica al contenido de un solo elemento de cuadrícula.
Los valores posibles son:
- start
- end
- center
- stretch
Ejemplos de layout:
CSS GRID
Enlaces de interes:
- CanIuse http://caniuse.com/#feat=css-grid
- css-tricks https://css-tricks.com/snippets/css/complete-guide-grid/
- google developers https://developers.google.com/web/updates/2017/01/css-grid
- https://gridbyexample.com/
- Flex https://bermartinv.github.io/css/files/taller/flex/flex.html
- Grid view con CSS http://slides.com/bermartinv/deck-6#/
- mozilladevelopers https://mozilladevelopers.github.io/playground/
Para más slides sobre CSS:
https://bermartinv.github.io/css/files/taller/menu_taller.html
display: grid
By Bernardo Martín
display: grid
- 1,278
