css - 在自动行中居中网格项目

Question

我正在使用 CSS 网格制作日历，我很好奇如果没有明确定义该行，是否可以将推送到下一行的网格项居中。

这是一个代码示例：

#calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 150px));
  /* grid-template-rows: repeat(auto-fit, 1fr); */
  justify-content: center;
  min-height: 10vh;
  max-height: 100vh;
  width: 100%;
  padding: 1rem;
}

#calendar>div {
  height: 100px;
  width: 100%;
  border: 2px solid black;
}

<div id="calendar">

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

标签： css

Answer 1

最好使用 flex 而不是 grid。

#calendar {
  min-height: 10vh;
  max-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#calendar>div {
  height: 100px;  
    text-align: center;
    flex: 1 0 auto;
  border: 2px solid black;
}

<div id="calendar">

  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>