响应式网站的CSS网格布局

Question

虽然我是CSS网格的新手，目前正在进行一个项目，以完美地使用它。

我正在尝试建立一个类似的蛋糕网站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>

请帮我，我想得到类似于这个设计的结果

Answer 1

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