Center align grid elements

Question

I have been trying to center a very simple CSS grid, but it doesn't seem to work out - I would like the grid elements to stay centered when the viewport becomes too small, but one of them is going to the next line (they are centered before and after).

Can anyone tell me what I am doing wrong?

.Listing {
  list-style: none;
  display: grid;
  grid-gap: 10px;
  padding: 10px 40px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding-bottom: 30px;
  background-color: #71F;
  justify-content: center;
}

.Listing li {
  background-color: #F7F;
  border: solid 1px #dddddd;
  height: 150px;
}

<div id="Text">
  <ul class="Listing">
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</div>

Try `text-align: center;` https://www.w3schools.com/cssref/pr_text_text-align.asp — Dom, Nov 21 '18 at 20:09
@MoHa Did you try the answers out? You can [accept an answer](https://stackoverflow.com/help/accepted-answer) to mark this question as closed. (you can upvote multiple answers, but only when you reach 15 more reputation points). Welcome to StackOverflow.. — Rachel Gallen, Nov 21 '18 at 22:40
CSS Grid doesn't just center things automatically like that. There are column tracks that need to be respected. Simple centering like that works in flex, but not grid. — Michael Benjamin, Nov 22 '18 at 00:47

score 1 · Answer 1 · answered Nov 21 '18 at 20:11

1

You have a fixed minimum size. grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

When you ask the grid to resize smaller than 300px it will wrap.

Change your min size to a relative unit like % or vh to make it scale.

answered Nov 21 '18 at 20:11

Bryce Howitson

7,339
18
40

score 1 · Answer 2 · answered Nov 21 '18 at 20:40

I would recommend using percentages, as Bryce recommended above. Do bear in mind however, that when setting a width, to accommodate padding and margins. For example, in this instance, in this example, you have 3 list items which you wish to display on one line, as I understand it. It may seem logical to set a percentage dynamic width of 33%, however I would /have set it to 31%, as the padding will knock the width out a bit. Give this a whirl:

.Listing {
  list-style: none;
  display: grid;
  grid-gap: 10px;
  padding: 10px 30px 30px 20px;
  grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
  background-color: #71F;
  justify-content: center;
}

.Listing li {
  background-color: #F7F;
  border: solid 1px #dddddd;
  height: 150px;
}

<div id="Text">
  <ul class="Listing">
    <li>
      <div>One</div>
    </li>
    <li>
      <div>Two</div>
    </li>
    <li>
      <div>Three</div>
    </li>
  </ul>
</div>

Use css `calc(min% - padding)` to solve that instead of creating arbitrary percents — Bryce Howitson, Nov 21 '18 at 22:12
@BryceHowitson Yes that's the most accurate solution. My answer is intended as a guide though, to explain why not to set it to exactly a third. SO, after all, is not meant as a code writing service. Thanks for the addendum though. — Rachel Gallen, Nov 21 '18 at 22:17

score 0 · Answer 3 · answered Nov 22 '18 at 00:45

0

Well, I ended up finding a solution, pretty simple but really not elegant ... : I just used margin-left:50%; on the third element.

So it works, but if anyone has a more elegant solution I will be gled to learn it.

Thanks again

answered Nov 22 '18 at 00:45

Mo Ha

41
4

Center align grid elements

3 Answers3