居中 CSS 网格布局卡片

Question

在我帮助制作了一些 CSS 网格布局后，它们也具有 Web 响应性和移动性，我无法将这些卡片居中。 我在 Grid 容器上尝试了 justify-content:center ，但没有取得多大成功！ 有什么线索吗？

我还附上了一张图片 下面是css和html代码

   .grid {
    display: grid;
    grid-area:test;
    background-color: blue;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    
    grid-gap: 20px;
 
    align-items: stretch;
 
  }

  article{
    padding:10px;
    margin-left: 10px;
    margin-right: 10px;
    
    
    
  }

  .grid>article {
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    display: flex; /* <-------------- changes */
    flex-direction: column; /* <-------------- changes */
    
  }
  
  .grid>article img {
    max-width: 100%;
  }
  
  .text {
    padding: 0 20px 20px;
    flex-grow: 1;
    display: flex; /* <-------------- changes */
    flex-direction: column; /* <-------------- changes */
  }
  
  .text>p {
    flex-grow: 1; /* <-------------- changes */
  }
  
  .text>button {
    background: gray;
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
  }

HTML

 <main class="grid">
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Seamlessly visualize quality</h3>
            <p>Collaboratively administrate empowered markets via plug-and-play networks.</p>
            <button>Here's why</button>
          </div>
        </article>
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Completely Synergize</h3>
            <p>Dramatically engage seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing.</p>
            <button>Here's how</button>
          </div>
        </article>
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Dynamically Procrastinate</h3>
            <p>Completely synergize resource taxing relationships via premier niche markets.</p>
            <button>Read more</button>
          </div>
        </article>
        <article>
          <img src="https://via.placeholder.com/300x100" alt="Sample photo">
          <div class="text">
            <h3>Best in class</h3>
            <p>Imagine jumping into that boat, and just letting it sail wherever the wind takes you...</p>
            <button>Just do it...</button>
          </div>
        </article>
        <article>

还有人对动态 Web 响应式 CSS 网格布局卡的设计有更好的建议吗？虽然我喜欢它们当前的宽度和高度，但当浏览器到达特定视口时，它们会变得方形。

编辑：当我使用 repeat(auto-fit, minmax(200px,1fr));而不是参数自动填充，我得到了这个丑陋的拉伸。虽然在我的完整浏览器视口上。当我最小化他们得到的窗口时，他们在第一张图片中自动填充

Answer 1

问题似乎与您使用自动填充有关。基于优秀博客 css-tricks 中的this resource，自动填充将创建空列来填充屏幕（最小宽度为 200 像素，如您指定的那样）。

自动填充用尽可能多的列填充行。因此，只要新列可以容纳，它就会创建隐式列，因为它试图用尽可能多的列填充行。新添加的列可以也可能为空，但它们仍将占据行中的指定空间。

auto-fit 通过扩展 CURRENTLY AVAILABLE 列来适应空间，以便它们占用任何可用空间。浏览器会在用额外的列填充额外的空间（如 auto-fill ）然后折叠空的列之后执行此操作。

尝试更改为

.grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }