Why is header-logo and header-links not on the same line?

Question

Why is header-logo and header-links not on the same line?

Navigation

#1 by (0 votes)

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 and header-links are inside nav and this inside container.

css webdesign grid

asked by anonymous 27.08.2017 / 15:24

1 answer

ForEach returning only one object in the list Create graph with Chartjs inside the controller of another js file

score 0 · Answer 1

The answer was to let display: grid in all classes and in parent classes do:

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

If I create child classes with display: grid they will be in different rows. Below the full code:

* {
    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;   
}

Online code working here .