Skip to main content
ortografía, asimismo el OP asume que "none" se emplea en el "grid-template-areas" para forzar la distribución equitativa entre el layout-dos y el layout-tres
Origen Enlace

Tengo el siguiente CSS:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

Me gustaría que la segunda fila, estuviera dividida equitativamente entre el layout-dos y el layout-tres.

Hay alguna manera de lograr lo anterior, porque cuando se emplea none en el grid-template-areas deja un vacío en la maqueta, tal como se aprecia a continuación.

Imagen

¡Gracias!

Tengo el siguiente CSS:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

Me gustaría que la segunda fila, estuviera dividida equitativamente entre el layout-dos y el layout-tres.

Hay alguna manera de lograr lo anterior, porque cuando se emplea none en el grid-template-areas deja un vacío en la maqueta, tal como se aprecia a continuación.

Imagen

¡Gracias!

Tengo el siguiente CSS:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

Me gustaría que la segunda fila, estuviera dividida equitativamente entre el layout-dos y el layout-tres.

Hay alguna manera de lograr lo anterior, porque cuando se emplea none en el grid-template-areas deja un vacío en la maqueta, tal como se aprecia a continuación.

Imagen

ortografía, asimismo el OP asume que "none" se emplea en el "grid-template-areas" para forzar la distribución equitativa entre el layout-dos y el layout-tres
Origen Enlace

Tengo el siguiente CSS:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

LaMe gustaría que la segunda fila me gustaria que, estuviera dividida o distribuida equitativamente entre el layout-doslayout-dos y layout-tres, hayel layout-tres.

Hay alguna manera? es queda una especie de huego ylograr lo anterior, porque cuando se ve re horribleemplea none en el grid-template-areas deja un vacío en la maqueta, tal como se aprecia a continuación.   

Imagen

GRACIAS¡Gracias!

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

La segunda fila me gustaria que estuviera dividida o distribuida equitativamente entre el layout-dos y layout-tres, hay alguna manera? es queda una especie de huego y se ve re horrible.  Imagen

GRACIAS

Tengo el siguiente CSS:

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

Me gustaría que la segunda fila, estuviera dividida equitativamente entre el layout-dos y el layout-tres.

Hay alguna manera de lograr lo anterior, porque cuando se emplea none en el grid-template-areas deja un vacío en la maqueta, tal como se aprecia a continuación. 

Imagen

¡Gracias!

Origen Enlace

Problema con CSS Grid

display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 210px 265px 210px 245px 1fr;
grid-gap: 30px;
grid-template-areas: "layout-uno layout-uno layout-uno"
                     "layout-dos none layout-tres"
                     "layout-cuatro layout-cinco layout-cinco"
                     "layout-seis layout-siete layout-ocho";

La segunda fila me gustaria que estuviera dividida o distribuida equitativamente entre el layout-dos y layout-tres, hay alguna manera? es queda una especie de huego y se ve re horrible. Imagen

GRACIAS