css grid to justify contents center if row is not full - html

Question

So I was wondering if it was possible for display: grid to center its items at the center like a flexbox if the row isn't filled up.
Example:
for (let i = 0; i < 3; i++)
{
$("#main").append($("<div class='item'>test</div>"))
$("#flex").append($("<div class='flex-item'>test</div>"))
}
#main {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.item {
border: 1px solid black;
height: 100px;
}
#flex {
display: flex;
width: 100%;
justify-content: center;
}
.flex-item {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
</div>
<div id="flex">
</div>

Answer 1

Apply auto instead 1fr in grid-template-columns. Then apply your desired width for your items. It will make the desired result.
#main {
display: grid;
grid-template-columns: repeat(6, auto);
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.item {
border: 1px solid black;
height: 100px;
width:100px;
}
DEMO
UPDATE:
If you don't want to fix the column width then use the vw to apply dynamic width based on your screen.
.item {
border: 1px solid black;
content: "test";
height: 100px;
width:16vw;
}
DEMO