3

I'm trying to center the bottom two li items (restaurant info containers in the image below) in a ul list that is set to display: grid. I thought adding justify-items: center to the ul list ruleset would work, but it didn't. I also tried justify-content: center, which didn't change anything. Is there a solution that works with CSS grid that would the items in the last row?

appearance

<ul id="restaurants-list"></ul>

/* ul element */
#restaurants-list {
  background-color: #f3f3f3;
  list-style: outside none none;
  margin: 0;
  padding: 30px 15px 30px;
  display: grid;
  grid-gap: 20px;
  justify-items: center;
}

#restaurants-list li {
  background-color: #fff;
  border: 2px solid #ccc;
  font-family: Arial, sans-serif;
  padding: 10px;
  max-width: 270px;
}
nCardot
  • 5,992
  • 6
  • 47
  • 83

1 Answers1

1

justify-items: center; aligns element inside its grid cell - has nothing with alignment items in a row.

I'd suggest to do not use display:grid here but rather display:inline-block elements like this:

#restaurants-list {
   display:block;
   text-align: center;
   ...
}

#restaurants-list > li {
   display:inline-block;
   ...
}
c-smile
  • 26,734
  • 7
  • 59
  • 86
  • Ahh I see, thanks. I'm relying on CSS grid in my media queries so am looking for a solution that works with it if there is any way to center items in the last row. – nCardot Aug 26 '18 at 01:23