Can I fill a grid container from the center?

Question

Is there a way to fill a grid from the center?

I have a CSS grid container which has a dynamic content(it gets updated so the number of children is not fixed) that looks like this:

#container { 
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

and if I had all 4 columns filled it would look like this :

1 2 3 4 //Numbers that represent containers children

Which is okay for me, but the problem comes when I have, for instance, only two divs inside my main container and then it looks like this:

1 2 0 0

And what I would like to achieve is this:

0 1 2 0

Answer 1

NEW ANSWER:

If you want to stick to just grid and assuming you only have four columns and the possible configurations are 0 1 0 0, 0 1 1 0, 0 1 1 1, 1 1 1 1 then following CSS works:

.container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.col {
  height: 50px;
  background: green;
}

.col:first-child {
  grid-column-start: 2;
}

.col:first-child:nth-last-child(4) {
  grid-column-start: 1;
}

Assuming the HTML you have:

<div class="container">
  <div class="col">
  Col
  </div>
  <!-- Other Cols Here -->
</div>

Working Fiddle

ORIGINAL ANSWER:

For grids, it's not possible to center a dynamic number of elements. Grid layout is suitable for layouts with a fixed number of elements.

Refer to the use of grid vs flex layouts. Your problem is more suitable to be solved by flex where you use justify-content: center on flex containers to achieve centered children.

To achieve centered children, modify your styles on #container div:

#container { 
  display: flex;
  justify-content: center;
}

Scenario where you want 0 1 0 0, 0 1 1 0, 0 1 1 1, 1 1 1 1 and assuming there are only four columns:

.container {
  display: flex;
  justify-content: center;
}

.col {
  width: 25%;
  height: 50px;
  background: green;
}

.col:last-child:not(:nth-child(even)):first-child {
  margin-left: -25%;
}

.col:last-child:not(:nth-child(even)):not(:first-child) {
  margin-right: -25%;
}

I assume your markup will be something like this:

<div class="container">
  <div class="col">
  Col
  </div>
  <!-- Other Columns Go Here -->
</div>

Working Fiddle