1

How can I center a grid column? This is my current code

.example-grid {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(5, 1fr);
}

However, all the grid items are aligned to the left.

larkx
  • 71
  • 1
  • 9

2 Answers2

1

section {
  width: 400px;
  height: 400px;
  border:1px solid #ccc;
  display: grid;
  justify-content: center;
  align-content: center;
  gap: 4px;
  grid-auto-flow: column;
}

div{
  background:#777;
  color:#fff;
  padding: 30px;
}
<section>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</section>

Instead of align-items: center;, you have to use align-content: center;.

Everything else looks fine :)

align-items property is a Flexbox property not a CSS-Grid property

Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35
  • Doesn't seem to work :/ – larkx Oct 19 '21 at 18:14
  • Can you show you code dear @larkx I think you need to center the individual items in that case. Go to codepen.io here. First check what I have done and then do let me know, How can I help you better. :) https://codepen.io/emmeiWhite/pen/MWveVog – Imran Rafiq Rather Oct 19 '21 at 18:16
  • Ah, I've resolved it now that you provided the full code. I just need to edit some of the other styles. Thank you very much! – larkx Oct 19 '21 at 18:27
  • Also, I don't suppose you could help me promptly with something else. I have this code here to horizontally center my div, however - it's not vertically centring. How can I change it to do both? (Resulting in the div being in the middle of my screen) ``` .div-center { display: grid; justify-content: center; align-items: center; } ``` – larkx Oct 19 '21 at 18:30
  • Hey My Friend :) @larkx I would suggest you watch this free CSS-Grid 1 hour course. https://scrimba.com/learn/cssgrid This would help you understand things better :) – Imran Rafiq Rather Oct 19 '21 at 18:42
0

Your display property must be inline-grid instead of grid.

Pedro Henrique Arthur
  • 93
  • 5