Tengo un SPA css-grid angular con 3 secciones, nav, content y footer

<div class="body__div--background"  >
  <div class="css-grid-container">
    <app-nav-component></app-nav-component>
    <app-content-component></app-content-component>
    <app-footer-component></app-footer-component>
  </div>
</div>

nav es una navegación de arranque. En css-grid, quiero que nav ocupe su espacio habitual, content ocupe la mayor parte del espacio restante y footer ocupe un pequeño espacio en la parte inferior

.css-grid-container{
  height:100vh; /*height of the container is same ahs height of the view port.*/
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr;  /* 1 columns*/
  grid-template-rows: auto 15fr 1fr; /* 3 rows. Auto takes height of navigation, remaining is divided into 2 rows, middle row is 15 times larger than the 3rd row.*/
}

app-nav-component {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
}

app-footer-component{
  grid-column: 1 / -1;
  grid-row: 3 / -1;
}

app-content-component{
  grid-column: 1 / -1;
  grid-row: 2 / 3;
}

El content podría tener diferentes tipos de componentes Angular. Desde la perspectiva del diseño, quiero que todos estos estén centrados en la sección content. Mi problema es que si tengo, digamos, 2 componentes, digamos home y signup (en cualquier momento, solo uno de ellos sería visible dentro de content), entonces tengo que especificar {{X6} } en css de ambos. Esto se convertiría en un problema especialmente. a medida que crece la lista de mis componentes.

.homepage-component-css-grid-container{
  height: 100%;
  display: grid;
  grid-gap:20px;
  grid-template-columns: 1fr 1fr;  /* 2 columns*/
}

.div__signup{
  height:100%;
  display:flex;
  align-items: center;
  justify-content: center;

}

¿Hay alguna forma en la que especifique height:100% solo en un lugar y los componentes dentro de content ocupen todo el espacio y se centren? Intenté especificar height:100% en content (y lo eliminé de home y signup) pero noté que home y content no centrado correctamente, es decir, no centrado dentro del área content.

Ver fotos a continuación

Altura: 100 solo en el área de contenido

<div id="content-div">
  <router-outlet></router-outlet>
</div>

#content-div{
height:100%;
}

enter image description here

Lo que quiero es esto (pero para esto tengo que especificar explícitamente height:100 en todos los componentes que quiero colocar dentro de content. Preferiré no hacer esto para evitar la duplicación de código)

enter image description here

1
Manu Chadha 15 feb. 2018 a las 10:19

2 respuestas

La mejor respuesta

Si solo desea hacerlo en la cuadrícula CSS, haría lo siguiente:

  1. Dale a la clase .css-grid-container la propiedad de la cuadrícula grid-template-rows: auto 1fr auto;
  2. Defina su app-content-component como display: grid;.
  3. Ahora todos los elementos secundarios de app-content-component son elementos de cuadrícula y se pueden alinear con justify-self y align-self.
  4. En su caso, eso sería ahora align-self: center; y justify-self: center;.

Si lo desea, también debería tener más flexibilidad en una "cuadrícula de contenido" de esta manera. P.ej. ahora puede darle al elemento app-content-component la propiedad grid-template-rows: 15fr;


He aquí un vistazo:

body {
  padding: 0;
  margin: 0;
}

.css-grid-container {
  height: 100vh;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

app-nav-component {
  grid-column: 1;
  grid-row: 1 / 2;
  
  padding: 10px;
  background: gray;
}

app-content-component {
  grid-column: 1;
  grid-row: 2 / 3;
  display: grid;
}

login {
  align-self: center;
  justify-self: center;

  padding: 10px;
  background: red;
}

app-footer-component{
  grid-column: 1;
  grid-row: 3 / -1;
  
  padding: 10px;
  background: gray;
}
<div class="body__div--background">
  
  <div class="css-grid-container">
    
    <app-nav-component>

      {nav}    
    
    </app-nav-component>
    
    <app-content-component>
      
      <login>{login}</login>
        
    </app-content-component>
    
    <app-footer-component>
    
      {footer}
    
    </app-footer-component>
    
  </div>
  
</div>

Espero que eso pueda ayudar :)

1
Arne 15 feb. 2018 a las 16:17

No se recomienda usarlo así ... pero si no está poniendo tantos elementos dentro de content-div, puede usar esto:

#content-div > * {
height: 100%;
}

Esto debería ocuparse de todos los niños en content-div.

0
Ricardo Aquino 15 feb. 2018 a las 11:35