CODEWITHSUNDEEP
csscss-grid
Nodnin
Nodnin

Reputation: 451

align-items property not working in CSS Grid

I am trying to use CSS Grid to align items which will be part of a navbar.

You can see it here: https://jsfiddle.net/nodpekar/82p0x4hw/5/

I don't know why the below code does not align the items in class navbar-items in center. 

body,
html {
  height: 100%;
  margin: 0;
}

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css" rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

Upvotes: 3

Views: 7690

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371271

Instead of using justify-content: center, use justify-items: center. That's it.

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: grid;
  align-items: center;
  /* justify-content: center; */
  justify-items: center; /* new */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css"
      rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

If you were using flexbox instead of grid, then your alignment code would have worked:

#navbar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.navbar-items {
  display: flex; /* adjustment */
  flex-direction: column; /* new */
  align-items: center;
  justify-content: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.1/css/all.min.css"
      rel="stylesheet"/>
<div id="navbar">
  <div class="navbar-items">
    <p>Projects</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Blog</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
  <div class="navbar-items">
    <p>Resume</p>
    <span><i class="fas fa-angle-down"></i></span>
  </div>
</div>

The reason for this difference is due to the difference in layout structures.

  • In flexbox, justify-content applies directly to flex items.

  • In grid, justify-content applies to grid columns (more details).

  • In flexbox, there is no justify-items property (more details)

  • In grid, justify-items applies to grid items (more details)

Hence, to make your layout work, use justify-items in grid and justify-content in flex.

Upvotes: 4

Related Questions