[CSS] grid-template-columns: 1fr

From 

to

 

HTML:

    <header class="header item">
      <em><strong>LOGO</strong></em>
      <a href="#about">About</a>
      <a href="#portfolio">Portfolio</a>
      <a href="https://github.com/eggheadio" target="_blank">Github</a>
      <a href="mailto:eggo@email.com">Contact</a>
    </header>

 

CSS:

.header {
  grid-area: header;
  display: grid;
  grid-auto-flow: column;
  grid-gap: 10px;
  grid-template-columns: 1fr;
  align-items: center;
  padding: 10px;
}

 

Just want to explain why adding `grid-template-columns: 1fr` would work. 

Reason is because here `1fr` only apply to the `LOGO`, so logo will take all the available spaces. Therefore it push all links to the right.

 

If you do `1fr 1fr`, then not only LOGO, but also the first <a> will also be included.