SOURCE

<ul class="container">
	<li class="item">产品 1</li>
	<li class="item">产品 2</li>
	<li class="item">产品 3</li>
	<li class="item">产品 4</li>
	<li class="item">产品 5</li>
</ul>

*{padding: 0;margin: 0;box-sizing: border-box;}

body{
    width: 375px;
    margin: 0 auto;
    background: #f3f3f3;
}

ul,li{list-style: none}

.container{
    display: flex;
    
    flex-wrap: wrap;
    background: #fff;
    /*
    如果觉得最上面有一个空白很奇怪，可以用负的 margin,
    -10px 就是下面的 margin-top 顶出来的
    */
    margin-top: -10px;
}

.item{
    /*
    375 是屏幕的宽度，
    30 是横向的3个空白间隙的距离，一个 10 px
    2 表示2列
    在实际开发中，我们可以用 vw 来替换掉 px 
    */
    width: calc((375px  - 30px ) / 2);
    height: 300px;
    background: green;
    margin-left: 10px;
    margin-top: 10px;
    color: #fff;
    padding: 10px;
}