Dos Columnas Iguales
En este patrón de diseño se tienen dos columnas del mismo tamaño, generalmente para computadoras o tablets, en movil toma una sola columna.
El codigo se debe de implementar desde el elemento padre, por ejemplo:
Codigo en HTML
codigo CSS
El elemento
nos ofrece el acceso a propiedades
exclusivas de CSS grid.
El elemento
toma el porcentaje total dado por el selector
y lo divide entre el valor de las propiedades dadas por nosotros, se puede definir de tres formas
distintas:
Tres Columnas Iguales
Este ejemplo es similar al anterior, entonces aplicando lo anterior tenemos que:
Codigo en HTML
codigo CSS
Alternativa
Tres Columnas Iguales (uno mas grande)
Es un patrón de diseño en el que obtenemos columnas de diferentes tamaños, en este ejemplo vamos a posicionar uno al centro mas grande, y los lados mas pequeños
Codigo en HTML
codigo CSS
con
le estamos indicando los tamaños en pantalla que va tomar.
con
vamos evitar que los elementos se desplacen.
con los selectores
le estamos indicando al grid que tome la posición indicada por el valor del selector
para entender un poco mejor el posicionamiento podemos visualizarlo con el inspeccionar.
Por ejemplo con el selector
le
estamos indicando que se posicione desde el numero 2 hasta el 3, por lo que tomaria el 60% del
tamaño, algo similar pasaría con los demas selectores que deseamos posicionar.
por lo que finalmente tendriamos el siguiente resultado, aplicando las posiciones.
Alternativa
Por cada pixel que reciben los
toma el tamaño dado por los fracciones de
Una alternativa más avanzada
crea
unas tipo variables que van a corresponder a los tamaños dados por
recursivamente.
y simplemente al selector se la da la propiedad de
para poder utilizarla
Column drop
También se le conoce como colocación de columnas, va cambiando de acuerdo al espacio disponible
Suponiendo que tenemos el espacio de un disposito pequeño tenemos la siguiente distribución:
Primer Columna
Segunda Columna
Tercera Columna
Pero si tuvieramos más espacio disponible, suponiendo una computadora, las columnas se irían recolocando, se adapataría para obtener algo como lo siguiente:
Primer Columna
Segunda Columna
Tercera Columna
podríamos cambiar totalmente la distribución
veamos un ejemplo
Codigo HTML
Codigo CSS
Con la siguiente media querie le estamos indicando que a dispotivos mayores de 480px tome la distibución de 2 columnas, pero como son 3 elementos va crear automaticamente una fila, por lo que le indicamos que el primer elemento tome desde el espacio 1 hasta el 3, para que los siguiente dos espacios los rellene con los demas elementos.
Obtendríamos algo como esto:
Aplicando otra distribución a dispositivos mayores a 768px.
Le estamos indicando que el contenido primera se posicione de la columna de la 3/4 , y utilizamos grid-auto-flow: column; para que no haya desbordamiento de contenido
Se puede llevar mas complicado el reposicionamiento de columna gracias a CSS Grid, inspecciona el siguiete ejemplo:
Side Bar
Sidebar es mayormente utilizado en blogs, o tiendas virtuales, cuenta con area con un tamaño mas grande y una barra lateral de menor tamaño
Codigo HTML
Codigo CSS
con la propidad de le
indicamos el tamaño de los elementons que va tomar segun su función
con
le estamos indicando que acomode el contenido en los espacios vacios no declarados.
AL selector aside le estamos diciendo que con la propiedad grid-column:1/2;
tome el espacio de la primera columna.
Alternativa
layout Shifter
Puede cambiar su orden y la ubicación de todos los elementos
Se puede traducir como cambio de diseño, ya que los elementos secundarios los puede convertir en principales y viceversa
Suponiendo que tenemos un contenido ordenado:
Podriamos reacomodarlo como:
Para este patron de diseño utilizamos la propiedad de
con la que creamos areas para los contenedores, y observa como se posicionan con este simple codigo
esto lo podemos crear facimente con template columns pero, lo que va permitir layoutshifter es utilizar estas areas con nombre y definir donde se van a colocar
para definir un area, simplemente utilizamos un selector en el elemento que deseamos manipular, con
la propiedad de
Codigo HTML
Aplicando
distribución de 768px
distribución de 992px
en resumen en tamaños inferiores el titulo se va desplazar a la parte inferior, y en tamaños mas grandes se va a posicionar de lado derecho del contenido, layout shifter entra en acción en cada Media Querie, cambiando la ubicación de los elementos. esta es la función de layout shifter, cambiar de diseño dependiendo de cada media querie.
Aplicando un sub grid en un elemento padre
El subgrid se va aplicar para los elementos que se encuentran dentro del selector, va crear dos areas para cada entrada de blog, asigando una fracción de espacio, con una separación de 3rem, en la primera media querie.
En la segunda media querie vamos a retirar la asignación de columnas, para posicionar las entradas una debajo de la otra.