使网格列居中

Question

如何将网格列居中?这是我当前的代码

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

但是，所有的网格项都向左对齐。

Answer 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>

您必须使用align-content: center;而不是align-items: center;。

其他的看起来都很好:)

align-items属性是Flexbox属性而不是CSS-Grid属性

Answer 2

display属性必须为inline-grid而不是grid.