CSS-GRID Problems aligning content in navbar

Question

I'm doing an assignment with CSS-grid and part of the criteria is to build the website entirely with css-grid and html, however, when I'm trying to align the navbar items with css-grid I keep running into a problem where the links just stay in their original place. I've created a codepen.io if that's useful: https://codepen.io/spatrick195/pen/XBzYJe HTML

<div class="page-layout">
  <div class="top-nav">
    <div id="nav-brand"><a id="nav-brand" href="#">SR-2018</a></div>
    <div class="nav-links">
        <a class="nav-links" href="#">Login</a>
        <a class="nav-links" href="#">Sign Up</a>
    </div>
  </div>
</div>

CSS:

* {
margin: 0;
padding: 0;
}
.page-layout{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
grid-gap: 10px;
}

.top-nav{
grid-column: span 3;
padding: .5rem 1rem;
background-color: #FAFAFA;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

a{
text-decoration: none;
}

#nav-brand{
grid-column: 1;
}

.nav-links{
grid-column: 3;
}

The links you're trying to move don't seem to be grid items, since they're nested several layers below the children of the `.page-layout` element. — David Thomas, Jul 29 '18 at 10:28
Is there any way to get around that, or would I have to recreate the grid within top-nav? — Jacob, Jul 29 '18 at 10:39

Danield · Accepted Answer · 2018-07-29T10:49:40.097

1) Set the grid container properties on the top-nav div

.top-nav{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px;

    /* decorative properties */
    padding: .5rem 1rem;
    background-color: #FAFAFA;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

The reason for this is because grid container properties only apply to its immediate children (as @David Thomas already pointed out in the comments)

2) Rename the classes on the nav links from nav-links to nav-link

* {
  margin: 0;
  padding: 0;
}

.top-nav {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: .5rem 1rem;
  background-color: #FAFAFA;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

a {
  text-decoration: none;
}

#nav-brand {
  grid-column: 1;
}

.nav-links {
  grid-column: 3;
}

<div class="page-layout">
  <div class="top-nav">
    <div id="nav-brand"><a id="nav-brand" href="#">SR-2018</a></div>
    <div class="nav-links">
      <a class="nav-link" href="#">Login</a>
      <a class="nav-link" href="#">Sign Up</a>
    </div>
  </div>
</div>

@joshmoto - actually, that was part of the OP's code ;) - but to answer your question: The new fr unit represents a fraction of the available space in the grid container. - see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#The_fr_Unit) — Danield, Jul 29 '18 at 11:13

Jensei · Answer 2 · 2018-07-29T10:57:49.170

Not entirely certain what you want the final design to look like. But if I understood you correctly you are looking for something like this codepen.

I added the following code and also the id="nav-bar" in html for you nav-links container.

#nav-bar {
  display: flex;
  text-align: center;
  flex: 1;
}
#nav-bar > .nav-links {
  text-align: center;
  flex: 1;
}

Grid is used with flexbox. So you use flexbox on individual grid cells to align content as you want there.

Depending on what you are after you can look at the following pen where flex is set on a different item: All on same line

CSS-GRID Problems aligning content in navbar

2 Answers2