css - 如何使按钮适合 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 中的按钮拉伸(stretch)并适合它所包含的单元格。我的代码对按钮没有影响，它只是保留在单元格的左上角。非常感谢任何帮助!

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

Answer 1

不知道我理解的对不对，如果你只是想拉伸(stretch)按钮，使用:

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>