html - 响应式网站的 CSS 网格布局

Question

虽然我是 CSS Grid 的新手，我目前正在做一个项目来完善完美使用它的行为。

我正在尝试建立一个类似于此https://waracake.com [蛋糕网站] 的蛋糕网站，目标是让我所有的蛋糕都以与此蛋糕相同的方式排列，已经尝试了 YouTube 上的教程的所有方法，但是我所有的努力都失败了。

这是我的代码

.container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  /*grid-auto-rows: minmax(150px, auto);*/
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  padding: .8em 1.2em;
  grid-column: 1/3;
}

<main id="grid">
  <div class="product-container" class="grid">
    <div class="container">
      <ul>
        <li>
          <div class="product-grid">
            <img src="images/cake 1.jpeg" alt="cake1">
            <div class="product-content">
              <h3>Wedding Cake</h3>
              <p>Price <br> ₦ 10,000</p>
            </div>
          </div>
        </li>

        <li>
          <div class="product-grid">
            <img src="images/cake 2.jpeg" alt="cake2">
            <div class="product-content">
              <h3>Birthday Cake</h3>
              <p>Price <br> ₦ 7,000</p>
            </div>
          </div>
        </li>

        <li>
          <div class="product-grid">
            <img src="images/cake 3.jpeg" alt="cake3">
            <div class="product-content">
              <h3>Valentines Cake</h3>
              <p>Price <br> ₦ 10,000</p>
            </div>
          </div>
        </li>

        <li>
          <div class="product-grid">
            <img src="images/cake 4.jpeg" alt="cake4">
            <div class="product-content">
              <h3>Birthday Cake</h3>
              <p>Price <br> ₦ 9,000</p>
            </div>
          </div>
        </li>

        <li>
          <div class="product-grid">
            <img src="images/cake 6.jpeg" alt="cake6">
            <div class="product-content">
              <h3>Wedding Cake</h3>
              <p>Price <br> ₦ 12,000</p>
            </div>
          </div>
        </li>

        <li>
          <div class="product-grid">
            <img src="images/cake 7.jpeg" alt="cake7">
            <div class="product-content">
              <h3>Wedding Cake</h3>
              <p>Price <br> ₦ 5,000</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</main>

请帮帮我，我想获得与此设计类似的结果

标签： htmlcss

Answer 1

ul {
 display: inline-flex;
 list-style: none;
}
li {
 margin: 20px;
}