0
  .container {
    width: 100%;
    display: grid;
    align-content: center;    
    grid-gap: 10px;
    grid-template-columns: auto;
    grid-template-rows: 3fr 15fr 10fr auto;
    grid-template-areas:
      'header-top header-top'
      'header-hackacenter header-inscrevase' 
      'premio botao'
      'jurado jurado jurado jurado'
      'org org org org'
      'logo slogan'
      'patrocinador patrocinador patrocinador'
      'footer-links footer-copyright'
    ;
  }

.nav {
    display: subgrid;
    grid-area: header-top; 
    grid-template-areas:
        'header-logo header-links'    
}

 .header-logo {
    justify-content: start;
    grid-area: header-logo;     

 }

 .header-links {
    justify-content: end;
    grid-area: header-links;         
 }

PS: header-logo e header-links estão dentro de nav e este dentro de container.

3

1 Resposta 1

0

A resposta foi deixar display:grid em todas as classes e nas classes pai fazer:

align-items: center;
    justify-content: space-between;
    grid-template-areas:
        'header-logo header-links'   

Se eu criar classes filhas com display:grid elas ficarão em linhas diferentes. Abaixo o código completo:

* {
    margin: 0px;
    padding: 0px;
  }

  .box {
    background-color: #9009A0; 
  }

  .container {
    width: 100%;
    display: grid;
    align-content: center;    
    grid-gap: 10px;
    grid-template-columns: auto;
    grid-template-rows: 3fr 15fr 10fr auto;
    grid-template-areas:
      'header-top header-top'
      'header-mid header-mid' 
      'premio botao'
      'jurado jurado jurado jurado'
      'org org org org'
      'logo slogan'
      'patrocinador patrocinador patrocinador'
      'footer-links footer-copyright'
    ;
  }

.nav {
    display: grid;
    grid-area: header-top; 
    align-items: center;
    justify-content: space-between;
    grid-template-areas:
        'header-logo header-links'    
}

 .info {
    display: grid;
    grid-area: header-mid;
    justify-content: space-between;    
    grid-template-areas:
        'header-hackacenter header-inscrevase'  
 }

 .header-hackacenter {
    display: grid;
    grid-area: header-hackacenter;    
 }

 .header-inscrevase {
    display: grid;
    grid-area: header-inscrevase;   
}

O código online funcionando aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .