Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
#container {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px;
  background-color: green;
  padding: 7px;
}
#container > div {
  background-color: beige;
  padding: 5px;
}
Result
</style>
</head>
<body>
<h1>The repeat() Function</h1>
<p>Here, repeat(4, auto) creates four columns; each column will have a size of auto, and this is repeated for all columns.</p>
<p>This will be the same as writing grid-template-columns: auto auto auto auto;.</p>
<div id="container">
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
  <div>auto width.</div>
</div>
</body>
</html>