Justify content makes grid item take up less space

Question

I am trying my hands on the CSS grid layout. Code below.

.navbar{
    display: grid;
    background: #000;
    grid-template-columns: 3fr 1fr;
}

.brand{
    justify-self: start;
    padding: 1em;
    font-weight: 800;
    font-style: 1.2em;
}

.items{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template: 1fr auto;
}

.navbar li{
    padding: 1em;
    list-style-type: none;
}

.navbar a{
    color: white;
    text-transform: uppercase;
    text-decoration: none;
}

.navbar li:hover{
    background: white;
}

.navbar li:hover>a{
    color: black;
}

<html>
    <head>
        <title>The Blog</title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <nav class = "navbar">
            <li class="brand"><a href="#">The Blog</a></li>
            <div class="items">
                <li><a href="#">Sign In</a></li>
                <li><a href="#">FAQ</a></li>
                <li><a href="#">About</a></li>
            </div>
        </nav>
    </body>
    </html>

Now I want all my <li> elements in the .items grid to be centered but also take up full width and height of the grid column, so that when I hover over them the full column changes background color. Now I used jusify-items and align-items for the positioning but that screws up the hover part. Ideas on how to fix it?

Note that `li` elements *must* be the children of `ol` or `ul` or `menu` containers ([source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)). You have them as children of `nav` and `div`. This is invalid HTML. Since you already use `nav` (and as a grid container), I would suggest you remove the `li` elements, making the `a` elements the children. — Michael Benjamin, May 26 '18 at 20:20
Ok. Thanks for the tip. I am still learning so not too familiar with css. However sometimes it really annoying. — A Rogue Otaku, May 29 '18 at 10:26

score 1 · Accepted Answer · answered May 26 '18 at 20:23

.navbar {
  display: grid;
  background: #000;
  grid-template-columns: 1fr 1fr;
}

.brand {
  justify-self: start;
  padding: 1em;
  font-weight: 800;
  font-size: 1.2em;
}

.items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}

.navbar a:hover {
  background: white;
  color: black;
}

<nav class="navbar">
  <a class="brand" href="#">The Blog</a>
  <div class="items">
    <a href="#">Sign In</a>
    <a href="#">FAQ</a>
    <a href="#">About</a>
  </div>
</nav>

More information: Centering in CSS Grid

This solved the problem. Still need to learn a lot. CSS is weird and interesting at the same time. :) — A Rogue Otaku, May 29 '18 at 10:40

Lucy Isabelle · Answer 2 · 2018-05-26T16:09:47.050

I haven’t done this using grid but I have using flex.

The below code is what I tested and seemed to be work as your original code posted except it fills the rest of the space of the navbar (assuming this is what you want)

 .navbar{ 
display: flex; //this is the first layout
background: #000;
}

.brand{
padding: 1em;
font-weight: 800;
font-style: 1.2em;
background-color: green;
}

.items{
display: flex;  //this must not change as it makes sure all items can use the flexbox grid
flex: 1; //this makes it take remaining space after the brand is used
}

.navbar li{
display:flex; //this can be changed as there are no sub items requiring the flexbox grid
padding: 1em;
list-style-type: none;
}

.items li {
flex: 1; //sets each items li to be evenly spaced
}

.navbar a{
color: white;
text-transform: uppercase;
text-decoration: none;
}

.navbar li:hover{
background: white;
}

.navbar li:hover>a{
color: black;
}

Thanks for the answer but I guess I prefer Michael's answer. — A Rogue Otaku, May 29 '18 at 10:40

Justify content makes grid item take up less space

2 Answers2