在 CSS 网格布局卡上对齐元素答案

【问题标题】：Aligning elements on CSS Grid Layout Cards在 CSS 网格布局卡上对齐元素
【发布时间】：2021-01-30 04:12:17
【问题描述】：

我从一个网站上发现了这个有趣的 CSS Grid Layout for Cards，该网站也是网页响应和移动响应的，但我正在努力让所有按钮在每张卡片上的同一行上对齐，即使每个卡片的文本卡不一样。有什么想法吗？

代码下方

    <!doctype html>
<title>Example</title>
<style>
.grid { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
  }
.grid > article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
}
.grid > article img {
  max-width: 100%;
}
.text {
  padding: 0 20px 20px;
}
.text > button {
  background: gray;
  border: 0;
  color: white;
  padding: 10px;
  width: 100%;
  }
</style>
<main class="grid">
  <article>
    <img src="/pix/samples/23m.jpg" 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="/pix/samples/24m.jpg" 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="/pix/samples/22l.jpg" 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="/pix/samples/15l.jpg" 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>
    <img src="/pix/samples/25m.jpg" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="/pix/samples/16l.jpg" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

我喜欢每张卡片都具有相同的大小等，而且我可以通过一些 CSS 过渡属性来做很多事情，比如让整个卡片成为完整的图像，当你悬停时你可以看到卡片上的文字，但出于好奇我想让这些按钮始终在卡片底部对齐。

【问题讨论】：

标签： html css css-grid

【解决方案1】：

由the guide保存：

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

.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%;
}

<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>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Dynamically innovate supply chains</h3>
      <p>Holisticly predominate extensible testing procedures for reliable supply chains.</p>
      <button>Here's why</button>
    </div>
  </article>
  <article>
    <img src="https://via.placeholder.com/300x100" alt="Sample photo">
    <div class="text">
      <h3>Sanity check</h3>
      <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
      <button>Stop here</button>
    </div>
  </article>
</main>

简而言之，文章元素和嵌套的.text 元素都需要是具有适当配置的弹性列。

【讨论】：

谢谢！尽管我首先尝试使用绝对位置和相对属性来修复它，但我想到了类似的东西。但是带有 Flex 和 Flex Columns 的解决方案是有意义的，而且是现代的！虽然可以通过 display:inline-block 实现它？新手好奇心
是的，绝对定位应该是最后的手段。它带来的麻烦往往多于解决的问题。

【解决方案2】：

这样的东西应该可以工作......

.text {
  display: grid;
  height: 90%;
  grid-template-rows: auto 1fr auto;
}

【讨论】：

我想为每张带有网格区域的卡片创建一个网格系统，但我想知道是否有更简单和更传统的解决方案