¿Es mala practica definir el tamaño de las filas y columnas de la siguiente manera? <code>.container { height: 100vh; display: grid; ...

Pregunta de la clase:
Definiendo áreas de contenido
Joel Dominguez Merino

Joel Dominguez Merino

Pregunta
studenthace 5 años

¿Es mala practica definir el tamaño de las filas y columnas de la siguiente manera?

.container { height: 100vh; display: grid; grid-template: 0.5fr 3fr 0.5fr / 1fr 2fr; grid-gap: 10; grid-template-areas: "header header" "left contenedor" "footer footer"; }

Como verán defino las filas con 0.5fr 3fr 0.5fr

Al igual que las columnas donde defino el doble en la segunda columna para obtener ese tamaño menor.

O es mas recomendable definirlo con una medida Absoluta? Como lo es px como lo hace Leonidas en la clase

6 respuestas
para escribir tu comentario
    Joel Dominguez Merino

    Joel Dominguez Merino

    studenthace 5 años

    Gracias por el consejo! Saludos :D

    jorge llanque

    jorge llanque

    studenthace 5 años

    Si estás trabajando en un proyecto real obviamente debes usar medidas relativas como fracciones en el caso de grid. ¿Por qué? porque grid trabaja explícitamente con contenedores, obviamente su alcance va mucho más allá, pero si estás construyendo contenedores sabrás muy bien que esos contenedores tendrán que ser responsivos, entonces para tener un código más eficiente y limpio, sin mencionar que esto también optimiza tu código, mi consejo es trata de usar medidas relativas en todos los contenedores que vayas a construir.

    Joel Dominguez Merino

    Joel Dominguez Merino

    studenthace 5 años

    Ok, muchas gracias por sus comentarios :)

    Efraín Hernández García

    Efraín Hernández García

    studenthace 5 años

    Creo es mucho mejor como tu lo planteas

    0 0

    0 0

    studenthace 5 años

    En la clase se hace con medidas absolutas porque es más fácil de entender y enseñar ;)

    0 0

    0 0

    studenthace 5 años

    La mejor forma es hacerlo con medidas relativas ya que así se adapta mucho mejor el responsive design.

Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.

Curso de CSS Grid Layout 2017
Curso de CSS Grid Layout 2017

Curso de CSS Grid Layout 2017

El módulo CSS Grid Layout nos permite generar distribuciones del contenido en nuestros sitios web de forma eficiente. Controla esta estructura bidimensional de filas y columnas con propiedades de CSS. Crea layouts increíbles de manera fácil, rápida y sin repetir código.