Alinear columnas en CSS Grid

¿Qué propiedades de CSS debo configurar para que las columnas se ajusten una debajo de la otra, ignorando la altura de las columnas adyacentes horizontalmente?

Disposición deseada para envolver para caber 2 columnas a través.

Intento fallido

Estoy intentando hacer esto con display: grid , pero no se comporta como quiero. Un ejemplo:

 header { height: 2.0rem; background: PeachPuff; } footer { height: 2.0rem; background: PaleGreen; } header, footer, section.app-column { padding: 1.0rem; } section#main section#app-column-primary { grid-area: primary; height: 5.0rem; background: Cyan; } section#main section#app-column-secondary { grid-area: secondary; height: 15.0rem; background: Thistle; } section#main section#app-column-tertiary { grid-area: tertiary; height: 10.0rem; background: Coral; } section#main { display: grid; grid-template-columns: repeat(3, 10.0rem); grid-row-gap: 0.2rem; grid-column-gap: 0.5rem; } section#main { content: "This application requires a display at least 200 pixels wide."; } @media(min-width: 200px) { section#main { grid-template-areas: "primary" "secondary" "tertiary"; } } @media(min-width: 350px) { section#main { grid-template-areas: "primary secondary" "tertiary ."; } } @media(min-width: 520px) { section#main { grid-template-areas: "primary secondary tertiary"; } } 
 
Header ipsum, dolor sit amet.
Primary app column
Secondary app column
Tertiary app column
Footer ipsum, dolor sit amet.

Resultado correcto para 3 columnas y 1 columna.

Eso hace lo que necesito para los diseños de tres columnas ( "primary secondary tertiary" ) y de una columna ( "primary" "secondary" "tertiary" ).

Diseño correcto para 3 columnas de ancho. Diseño correcto para 1 columna a través.

Disposición no deseada para 2 columnas.

Pero el diseño de dos columnas tiene la columna tertiary que comienza debajo de la columna secondary :

Diseño incorrecto para 2 columnas a través.

Disposición deseada para 2 columnas.

Lo que quiero es que la ubicación de la columna tertiary ignore la columna secondary porque no se superpondrán en absoluto:

Disposición deseada para envolver para caber 2 columnas a través.

¿Cómo puedo hacer esto con CSS? ¿Es la display: grid apropiada para esto? ¿Debería usar display: flex o algo diferente (si es así, exactamente qué propiedades CSS necesito)?

En lugar de esto:

 @media(min-width: 350px) { section#main { grid-template-areas: "primary secondary" "tertiary ."; } } 

… lo que crea una cuadrícula de 2×2, como esta:

 [ primary ] [ secondary ] [tertiary ] [ empty space ] 

… y es exactamente lo que estás mostrando como el problema:

introduzca la descripción de la imagen aquí

Hacer esto:

 @media(min-width: 350px) { section#main { grid-template-areas: "primary secondary" "tertiary secondary"; } } 

demo jsFiddle

 header { height: 2.0rem; background: PeachPuff; } footer { height: 2.0rem; background: PaleGreen; } header, footer, section.app-column { padding: 1.0rem; } section#main section#app-column-primary { grid-area: primary; height: 5.0rem; background: Cyan; } section#main section#app-column-secondary { grid-area: secondary; height: 15.0rem; background: Thistle; } section#main section#app-column-tertiary { grid-area: tertiary; height: 10.0rem; background: Coral; } section#main { display: grid; grid-template-columns: repeat(3, 10.0rem); grid-row-gap: 0.2rem; grid-column-gap: 0.5rem; } section#main { content: "This application requires a display at least 200 pixels wide."; } @media(min-width: 200px) { section#main { grid-template-areas: "primary" "secondary" "tertiary"; } } @media(min-width: 350px) { section#main { grid-template-areas: "primary secondary" "tertiary secondary"; } } @media(min-width: 520px) { section#main { grid-template-areas: "primary secondary tertiary"; } } 
 
Header ipsum, dolor sit amet.
Primary app column
Secondary app column
Tertiary app column
Footer ipsum, dolor sit amet.

Intento darle una solución usando la propiedad grid-row-end y auto-fill .

Primero: esta solución funciona bien con sus dimensiones (no es muy escalable, pero desafortunadamente, sin usar javascript, no hay una solución CSS perfecta y pura, creo).

Por cierto, así es como funciona:

  • Creo una cuadrícula con grid-template-columns: repeat(auto-fill, 10rem); propiedad
  • Para cada elemento de la cuadrícula pongo un grid-row-end: span [dimension]; => para 5rem pongo [1], para 15rem pongo [3] y para 10 rem pongo [2] (esto es cuando dije ” no es escalable ” porque si cambia las dimensiones que tiene que cambiar aquí también)

Para todas estas propiedades, puede encontrar información muy útil aquí: https://css-tricks.com/snippets/css/complete-guide-grid/ y aquí: https://rachelandrew.co.uk/archives/2017/01 / 18 / css-grid-one-layout-method-not-the-only-layout-method / (Mencioné a mi gurú de CSS, estoy un poco emocionado (^ _ ^;))

Este es el código en acción:

 header { height: 2.0rem; background: PeachPuff; } footer { height: 2.0rem; background: PaleGreen; } header, footer, section.app-column { padding: 1rem; } section#main section#app-column-primary { height: 5rem; grid-row-end: span 1; background: Cyan; } section#main section#app-column-secondary { grid-row-end: span 3; height: 15rem; background: Thistle; } section#main section#app-column-tertiary { grid-row-end: span 2; height: 10rem; background: Coral; } section#main { display: grid; grid-template-columns: repeat(auto-fill, 10rem); grid-row-gap: 0.5rem; grid-column-gap: 0.5rem; } 
 
Header ipsum, dolor sit amet.
Primary app column
Secondary app column
Tertiary app column
Footer ipsum, dolor sit amet.