我如何使按钮适合CSS网格容器的单元格？

Question

我有这样的东西：

<div class="content" >
  <div class="nested">
        <div class="one">something</div>
        <div class="two">something something</div>
        <div class="three">..</div>
        .....

        <div class="eight"><button class="buy_now_button">Buy Now!</button></div>
  </div>
</div>

.buy_now_button
{
  place-self: center stretch;
}

我想在第八个div处拉伸按钮，使其自身适合所包含的单元格。我的代码对按钮没有影响，仅保留在单元格的左上方。不胜感激！

我一直在关注：https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 1

不知道我是否理解正确，但是如果您只想拉伸按钮，请使用：

width: 100%;

.content {
  background-color: green;
}

.nested {
  background-color: yellow;
  width: 50%;
}

.buy_now_button {
  width: 100%;
}

<div class="content" >
  <div class="nested">
        <div class="one">something</div>
        <div class="two">something something</div>
        <div class="three">..</div>
        <div class="eight"><button class="buy_now_button">Buy Now!</button></div>
  </div>
</div>