Hola, básicamente, tengo esto hasta ahora (en dispositivos móviles logré que responda, pero en pantallas más grandes no puedo establecer la altura del diseño para que sea igual para todos los niños)

En el escritorio:

enter image description here

En el móvil (ok):

enter image description here

Pero no puedo establecer mi altura cuando no es un dispositivo móvil

Quiero esto:

enter image description here

Código:

  <TestingLive>
    <div class="a">
      <span>a</span>
    </div>
    <div class="b">
      <span>b</span>
    </div>
    <div class="c">
      <span>c</span>
    </div>
    <div class="d">
      <span>d</span>
    </div>
    <div class="e">
      <span>e</span>
    </div>
  </TestingLive>

Y mi css (con estilo comp)

const TestingLive = styled.div`
  display: grid;
  grid-template-areas:
    "a b c"
    "a d e";
  grid-gap: 4px;
  grid-template-columns: 40vw 1fr 1fr;

  ${media.lessThan("medium")`
  grid-template-columns:1fr;
  grid-auto-rows: 200px;
  grid-template-areas:
  'a '
  'b'
  'c'
  'd'
  'e';
  `}

  margin-top: 50px;
  & > * {
    background-color: #333;
    color: white;
    position: relative;
  }

  & .a {
    grid-area: a;
  }

  & .b {
    grid-area: b;
  }

  & .c {
    grid-area: c;
  }

  & .d {
    grid-area: d;
  }

  & .e {
    grid-area: e;
  }
`;

Ejemplo:

https://codesandbox.io/s/great-snowflake-4dwpy

@Awais

Si uso: altura: 100%; altura máxima: 60vh; altura mínima: 60 vh;

Tengo esto

enter image description here

Pero si solo uso la altura 60 vh funciona normalmente

-2
user12465675 12 feb. 2020 a las 16:45

2 respuestas

La mejor respuesta

Establezca la altura en vh usando calc O simple height:100vh si no tiene más espacio en la página como margin padding etc.

.fHHWeb {
    display: grid;
    grid-template-areas:
        "a b c"
        "a d e";
    grid-gap: 4px;
    grid-template-columns: 40vw 1fr 1fr;
    margin-top: 50px;
    height: calc(100vh - 60px);
}
0
Awais 12 feb. 2020 a las 14:22

Si te entendí correctamente (deseas que el mosaico grande sea 60vh y el pequeño 30vh) simplemente agrega:

div {
    min-height: 30vh;
  }

Si eso no es lo que necesita, proporcione una mejor descripción y ejemplos.

0
RNH 12 feb. 2020 a las 13:57