Можно ли разместить кнопки под каждым элементом в сетке?

Question

Я пытаюсь сделать сетку с элементами / пиццей на заказ, и мне нужна кнопка «Добавить в корзину» под каждым элементом в сетке.Как мне это сделать?

До сих пор я пытался просто поместить кнопку с разрывом строки под элементом, но, как и предполагалось, это не сработало.

Вот соответствующий код, который у меня есть в теле:

.wrapper {
  width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  grid-row-gap: 30px;
  grid-column-gap: 10px;
}

.item {
  background: firebrick;
  color: white;
  padding: 10px;
}

.item:nth-child(even) {
  background: rgb(139, 19, 19);
}

.add {
  margin-bottom: 100px;
}

button {
  margin-bottom: 100px;
}

#container {
  background-color: maroon;
  width: 1500px;
  height: 1200px;
  margin-left: auto;
  margin-right: auto;
  border-color: black;
  border-width: 10px;
  border-style: double;
}

<div id="container">
  <div id="header">
    <h1> Pizza Planet </h1>
    <script src="index.js"></script>
  </div>
  <div id="content">
    <h2>Select your items:</h2>
    <div class="wrapper">
      <div class="item">1</div>
      <div class="add"><button>Add To Cart</button></div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</div>

Все, что нужно сделать, - это сделать огромный пробел для другой ячейки в сетке с крошечной кнопкой добавления в корзину.Буду признателен за любую помощь, спасибо.

Answer 1

Одним из подходов может быть использование CSS-сетки для достижения того, что вам нужно. Простой макет сетки для того, что вы описали выше, можно сделать так:

.item img {
  width:100%;
  /* Causes the button to sit below the img */
  display:block;
}

.item button {
  width:100%;
}

.grid {
  /* Specifies css grid to be used */
  display:grid; 
  /* Specifies the number of columns and sizes in the grid */
  grid-template-columns: 1fr 1fr;
  /* Specifies spacing between grid cells */
  grid-gap:1rem;
}

<div class="grid">
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
  <div class="item">
    <img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
    <button>Order</button>
  </div>
</div>