Question

CSS网格，三个单元格，每个单元格中的三个元素：标题，段落，链接。每个段落具有不同的长度，从而使链接不对齐。有什么方法可以对齐链接，最好将元素放置在单元格的底部吗？

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="grid">
  <div>
    <h3>Item 1</h3>
    <p>Description</p>
    <a href="#">Link 1</a>
  </div>
  <div>
    <h3>Item 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a href="#">Link 2</a>
  </div>
  <div>
    <h3>Item 3</h3>
    <p>Description</p>
    <a href="#">Link 3</a>
  </div>
</div>

https://codepen.io/anon/pen/GYEobV

Answer 1

您可以保留最外面的父级的grid布局，将内部的div转换为flex容器，最后在flex-end位置自动对齐链接元素：

.grid {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.grid div {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
}
.grid div a {
  margin-top: auto;
  width: 100%
  align-self: flex-end;
}

<div class="grid">
  <div>
    <h3>Item 1</h3>
    <p>Description</p>
    <a href="#">Link 1</a>
  </div>
  <div>
    <h3>Item 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a href="#">Link 2</a>
  </div>
  <div>
    <h3>Item 3</h3>
    <p>Description</p>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 2

使用position:absolute;可以解决您的问题，检查更新的代码段

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.col {
  position: relative;
}

a {
  position: absolute;
  bottom: 0;
}

<div class="grid">
  <div class="col">
    <h3>Item 1</h3>
    <p>Description</p>
    <a href="#">Link 1</a>
  </div>
  <div class="col">
    <h3>Item 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    <a href="#">Link 2</a>
  </div>
  <div class="col">
    <h3>Item 3</h3>
    <p>Description</p>
    <a href="#">Link 3</a>
  </div>
</div>

如何在CSS网格单元内放置元素？

2 个答案: