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.

Intereting Posts

Ocultar la primera palabra de intervalo mediante Css o Jquery JQuery: comprueba si el elemento está en flujo normal Habilidad de uso de la página hacia abajo con una barra de posición fija en la parte superior de la página Enlace con un problema de doble toque de pseudo elemento en iOS El fondo no funciona para un div escalado de div para el contenido dentro de él ¿Cómo puedo diseñar ul li in css?La consulta de medios div no cambia de ancho pero todo lo demás funciona