<div class="grid">
        <div class="item">Product 1</div>
        <div class="item">Product 2</div>
        <div class="item">Product 3</div>
        <div class="item">Product 4</div>
        <div class="item">Product 5</div>
        <div class="item">Product 6</div>
    </div>
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif;
}
body{
	height: 100vh;
	margin-top: 150px;
  padding: 0 20px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
}
.item{
	background: red;
	padding: 20px;
	color: wheat;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.