Why aren’t header-logo and header-links on the same line?

Asked

Viewed 52 times

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 within Nav and this within container.

css grid webdesign

  • Send your HTML please

  • Here for you to test: https://codepen.io/danilosilvadev/pen/qXMvdN?fref=gc

  • I would like the logo to be aligned to the left and the menu to the right.

1 answer

0

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

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

If I create daughter classes with display:grid they will be on different lines. 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;   
}

The online code working here.

Browser other questions tagged css grid webdesign

You are not signed in. Login or sign up in order to post.