html - 为什么我的 CSS 网格布局 div 不以大视口(viewport)为中心？

Question

我试图在父 div 中显示 div，但希望子 div 位于中心而不是从父 div 的开头。下面给出了 HTML/CSS 以及它在 iPad(看起来不错)和计算机(不是我想要的东西)上的外观截图。

.inner-tile {
  display: inline-grid;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr ));
  grid-template-rows: 1fr;
  justify-items: center;

  width: 100%;
  height: auto;
  font-size: 18px;
  padding-bottom: 10px;
}

.event {
  border: 1px solid grey;
  border-radius: 4px;
  min-width: 240px;
  min-height: 270px;
  width: 90%;
  height: auto;
}

  <div class = "inner-tile">
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
    <div class = "event">
      <div class="event-image"></div>
      <a href = "#learnmore" class = "learn-more">event</a>
    </div>          
  </div>

Answer 1

如果你总是有 4 个元素，你可以考虑 max-width 并使用 grid 而不是 inline-grid 那么你可以使用 margin 自动

.inner-tile {
  display: grid;
  max-width: calc(240px * 4 + 5px * 3);
  margin: auto;
  grid-gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  justify-items: center;
  
  font-size: 18px;
  padding-bottom: 10px;
}

.event {
  border: 1px solid grey;
  border-radius: 4px;
  min-width: 240px; 
  min-height: 270px;
  width: 90%;
}

<div class="inner-tile">
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
  <div class="event">
    <div class="event-image"></div>
    <a href="#learnmore" class="learn-more">event</a>
  </div>
</div>