Mis mejores amigos en css
Grid y flex
por Guadalupe “Lupe” Lazzo
Qué es css grid y flexbox?(según yo)
Es la forma en que hacemos que los elementos de nuestro html nos hagan caso en “dónde” queremos meterlo. Manejandolos como bloques.
Es la manera más sencilla de controlar la disposición de los elementos.
Cómo los invocamos?
siempre desde un elemento PADRE que contenga los elementos que queremos alinear.
display: flex;
ó
display: grid;
-Empecemos por flexbox-
Tenemos un elemento padre, al que le decimos cómo alinear a sus hijos, en este caso queremos todo centrado, y por defecto los pone en una sola fila.
Y qué pasa si ahora queremos nuestros elementos contra los márgenes del padre?
Le definimos un ancho para que tenga lugar para moverse a los lados, y cambiamos el valor de “justify-content”
Y si deseamos que se pongan los elementos uno debajo del otro?
Estas son las propiedades más básicas de flex, y las que se usan todo el tiempo en los maquetados.
Dónde puedo ver más de flex?
Css tricks : https://bit.ly/1xEYMhF ← la biblia de flex ♥♥
El tutorial de la ranita : https://flexboxfroggy.com/#es
Grid Layout
Para grid es importante definir un tamaño de fila, de columna y su cantidad
grid-template-columns
y
grid-template-rows
en un contenedor padre.
Los elementos se ubican automáticamente, pero si necesitamos ubicar un elemento en un lugar específico, definimos en qué columna empieza, y en cual termina, lo mismo para las filas.
grid-column-start, grid-column-end
y
grid-row-start , grid-row-end
Grid facilita la visibilidad del html, sin necesitar encerrar en múltiples divs todo lo que hacemos,y sin depender de bootstrap.
Chrome y Firefox nos dejan ver las grillas desde el inspector.
Al padre le definimos los tamaños de las columnas, de las filas, y la cantidad de las mismas; grid-gap define el margen que queremos que haya entre ellas.
Cómo le decimos a un elemento dónde queremos que se ubique en nuestra grilla?
Y se pueden combinar flex y grid?
CLARINES, son herramientas que se llevan muy bien juntas.
El contenedor del cuadrado está usando flex, es hijo de un grid y a su vez es padre flex.- Osea que sus hijos van a ser nietos de grid.
Dónde puedo encontrar más de grid?
Qué navegadores soportan flex y grid?
Ahora a trabajar se ha dicho!
git clone htps://github.com/guadalazzo/workshop-css-grid.git