时间戳

首页 > 解决方案 > 居中对齐网格元素

css - 居中对齐网格元素

问题描述

我一直在尝试将一个非常简单的 CSS 网格居中，但它似乎没有成功 - 当视口变得太小时，我希望网格元素保持居中，但其中一个将进入下一行（他们前后居中）。

谁能告诉我我做错了什么？

.Listing {
  list-style: none;
  display: grid;
  grid-gap: 10px;
  padding: 10px 40px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding-bottom: 30px;
  background-color: #71F;
  justify-content: center;
}

.Listing li {
  background-color: #F7F;
  border: solid 1px #dddddd;
  height: 150px;
}
<div id="Text">
  <ul class="Listing">
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</div>

标签： cssgridalignment

解决方案

你有一个固定的最小尺寸。 grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

当您要求网格调整小于 300 像素的大小时，它会自动换行。

将您的最小尺寸更改为相对单位，例如%或vh使其缩放。

推荐阅读