Centring a grid column

user_16111157 0
Viewed 32

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.

css
2 Answers

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

user_69389690

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

user_71314510
Related