<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.grid {
display: grid;
grid-gap: 10px;
border: 2px solid #000000;
margin: 10px;
}
.grid > div {
font-size: 30px;
padding: .5em;
background: gold;
text-align: center;
}
.auto-fill {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.auto-fit {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
</style>
</head>
<body>
<h2>Auto-fill</h2>
<div class="grid auto-fill">
<div>1</div>
<div>2</div>
</div>
<h2>Auto-fit</h2>
<div class="grid auto-fit">
<div>1</div>
<div>2</div>
</div>