How To Make A Grid Container Shrink To Fit The Content?

January 30, 2024 Post a Comment

I'm trying to make a game with a grid. I have x divs with x divs inside them, to create the grid. The problem is that I want the container div for all of this to only be as big as

Solution 1:

Grid won't work in this case. You need to use flexbox. Switch to display: inline-flex on the primary container.

`display: grid`

You can't use display: grid because that creates a block level container which, by default, occupies the full width of the parent. Since you can't define a width because:

I can't set it to a specific width because the amount of squares is going to be dynamic...

...then you can't use a block-level container. So that's where you stand now:

#start {
  display: grid;
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}

.even { background-color: #666; }
.odd  { background-color: #999; }

<divid="start"><divid="row_0"class="row"><divclass="gameNode odd"id="node_1"></div><divclass="gameNode even"id="node_2"></div><divclass="gameNode odd"id="node_3"></div><divclass="gameNode even"id="node_4"></div><divclass="gameNode odd"id="node_5"></div></div><divid="row_1"class="row"><divclass="gameNode even"id="node_6"></div><divclass="gameNode odd"id="node_7"></div><divclass="gameNode even"id="node_8"></div><divclass="gameNode odd"id="node_9"></div><divclass="gameNode even"id="node_10"></div></div><divid="row_2"class="row"><divclass="gameNode odd"id="node_11"></div><divclass="gameNode even"id="node_12"></div><divclass="gameNode odd"id="node_13"></div><divclass="gameNode even"id="node_14"></div><divclass="gameNode odd"id="node_15"></div></div><divid="row_3"class="row"><divclass="gameNode even"id="node_16"></div><divclass="gameNode odd"id="node_17"></div><divclass="gameNode even"id="node_18"></div><divclass="gameNode odd"id="node_19"></div><divclass="gameNode even"id="node_20"></div></div><divid="row_4"class="row"><divclass="gameNode odd"id="node_21"></div><divclass="gameNode even"id="node_22"></div><divclass="gameNode odd"id="node_23"></div><divclass="gameNode even"id="node_24"></div><divclass="gameNode odd"id="node_25"></div></div></div>

`display: inline-grid`

You can't use display: inline-grid because all items will stack vertically.

#start {
  display: inline-grid;
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}

.even { background-color: #666; }
.odd  { background-color: #999; }

<divid="start"><divid="row_0"class="row"><divclass="gameNode odd"id="node_1"></div><divclass="gameNode even"id="node_2"></div><divclass="gameNode odd"id="node_3"></div><divclass="gameNode even"id="node_4"></div><divclass="gameNode odd"id="node_5"></div></div><divid="row_1"class="row"><divclass="gameNode even"id="node_6"></div><divclass="gameNode odd"id="node_7"></div><divclass="gameNode even"id="node_8"></div><divclass="gameNode odd"id="node_9"></div><divclass="gameNode even"id="node_10"></div></div><divid="row_2"class="row"><divclass="gameNode odd"id="node_11"></div><divclass="gameNode even"id="node_12"></div><divclass="gameNode odd"id="node_13"></div><divclass="gameNode even"id="node_14"></div><divclass="gameNode odd"id="node_15"></div></div><divid="row_3"class="row"><divclass="gameNode even"id="node_16"></div><divclass="gameNode odd"id="node_17"></div><divclass="gameNode even"id="node_18"></div><divclass="gameNode odd"id="node_19"></div><divclass="gameNode even"id="node_20"></div></div><divid="row_4"class="row"><divclass="gameNode odd"id="node_21"></div><divclass="gameNode even"id="node_22"></div><divclass="gameNode odd"id="node_23"></div><divclass="gameNode even"id="node_24"></div><divclass="gameNode odd"id="node_25"></div></div></div>

This happens because the default value for grid-auto-columns is auto, meaning a single column sized to fit content.

In order to make your layout work using display: inline-grid, you would need to define columns, which doesn't appear to be acceptable in your layout.

#start {
  display: inline-grid;
  grid-template-columns: repeat(5, auto);
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}

.even { background-color: #666; }
.odd  { background-color: #999; }

<divid="start"><divid="row_0"class="row"><divclass="gameNode odd"id="node_1"></div><divclass="gameNode even"id="node_2"></div><divclass="gameNode odd"id="node_3"></div><divclass="gameNode even"id="node_4"></div><divclass="gameNode odd"id="node_5"></div></div><divid="row_1"class="row"><divclass="gameNode even"id="node_6"></div><divclass="gameNode odd"id="node_7"></div><divclass="gameNode even"id="node_8"></div><divclass="gameNode odd"id="node_9"></div><divclass="gameNode even"id="node_10"></div></div><divid="row_2"class="row"><divclass="gameNode odd"id="node_11"></div><divclass="gameNode even"id="node_12"></div><divclass="gameNode odd"id="node_13"></div><divclass="gameNode even"id="node_14"></div><divclass="gameNode odd"id="node_15"></div></div><divid="row_3"class="row"><divclass="gameNode even"id="node_16"></div><divclass="gameNode odd"id="node_17"></div><divclass="gameNode even"id="node_18"></div><divclass="gameNode odd"id="node_19"></div><divclass="gameNode even"id="node_20"></div></div><divid="row_4"class="row"><divclass="gameNode odd"id="node_21"></div><divclass="gameNode even"id="node_22"></div><divclass="gameNode odd"id="node_23"></div><divclass="gameNode even"id="node_24"></div><divclass="gameNode odd"id="node_25"></div></div></div>

display: inline-flex

With flexbox, a block level container (display: flex) won't work for the same reason described in the display: grid section above.

However, display: inline-flex works because the default value of flex-basis is auto, meaning that items are sized to fit content, and, unlike grid layout, there is no default setting forcing the items to stack into a single column.

#start {
  display: inline-flex;
  border: 2px solid red;
}

.row {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25px);
  grid-auto-rows: 25px;
}


.even { background-color: #666; }
.odd  { background-color: #999; }

<divid="start"><divid="row_0"class="row"><divclass="gameNode odd"id="node_1"></div><divclass="gameNode even"id="node_2"></div><divclass="gameNode odd"id="node_3"></div><divclass="gameNode even"id="node_4"></div><divclass="gameNode odd"id="node_5"></div></div><divid="row_1"class="row"><divclass="gameNode even"id="node_6"></div><divclass="gameNode odd"id="node_7"></div><divclass="gameNode even"id="node_8"></div><divclass="gameNode odd"id="node_9"></div><divclass="gameNode even"id="node_10"></div></div><divid="row_2"class="row"><divclass="gameNode odd"id="node_11"></div><divclass="gameNode even"id="node_12"></div><divclass="gameNode odd"id="node_13"></div><divclass="gameNode even"id="node_14"></div><divclass="gameNode odd"id="node_15"></div></div><divid="row_3"class="row"><divclass="gameNode even"id="node_16"></div><divclass="gameNode odd"id="node_17"></div><divclass="gameNode even"id="node_18"></div><divclass="gameNode odd"id="node_19"></div><divclass="gameNode even"id="node_20"></div></div><divid="row_4"class="row"><divclass="gameNode odd"id="node_21"></div><divclass="gameNode even"id="node_22"></div><divclass="gameNode odd"id="node_23"></div><divclass="gameNode even"id="node_24"></div><divclass="gameNode odd"id="node_25"></div></div></div>

Solution 2:

Try using margin-left and margin-right properties to bring in the width a bit. Also you could try using a percentage for the with (something below 100%). Since you have content centered that might bring your box off the left and right edges.

Solution 3:

You can use display inline-grid to grow the container by its children, but you need to set the number of elements in repeat(5, 25px);

#start {
    display: inline-grid;
}
.row {
    grid-template-columns: repeat(5, 25px);
}

But one question: for what is it? CSS GRID for two direction, you don't need the div.row, you control all with only the root container. For what you are making, you should use css flex.

Html5 News