在小米的电商页面中，经常会有商品列表的展示。请描述一下如何使用 CSS 实现一个简单的商品列表布局，每个商品项显示商品图片、名称和价格。

答题要点

采用分层分析法解答。先明确整体布局结构，再逐步细化每个部分。关键要点：一是使用合适的 HTML 结构，如 `ul` 和 `li` 标签创建列表；二是设置商品项的样式，如宽度、高度、边距等，可使用 `width`、`height`、`margin` 属性；三是图片、名称和价格的布局，可使用 `flexbox` 或 `grid` 布局。示例思路：首先，用 `ul` 和 `li` 创建商品列表的 HTML 结构。然后，为 `li` 元素设置 `width` 和 `margin` 等样式。使用 `flexbox` 布局，让图片、名称和价格在一行显示，通过 `justify-content` 和 `align-items` 属性进行对齐调整，从而实现一个简单的商品列表布局。