How to make a grid container shrink to fit the content?

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 it needs to be (say, 5x5 squares at 25px each = 125px x 125px container div). The height is fine, but the width stretches to the end. Each box is to be 25px.

I've tried grid-template-rows: repeat(auto-fill, 25px) which doesn't seem to work. I can't set it to a specific width (125px) because the amount of squares is going to be dynamic (but always a square number).

Show code snippet

I expected the container div to take up only as much space as the squares, but it stretches across the entire page. The height seems fine.

Here is a screenshot of what it's doing:

It's creating a bunch of extra squares, filling the space rather than only filling the actual divs.

Am I handling this correctly, or should I be formatting my HTML differently to get the desired effect?

Asked By: supafiya
||
Source

Answer #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:

Show code snippet

display: inline-grid

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

Show code snippet

This happens because the default value for grid-auto-columns (and, ipso facto, grid-template-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.

Show code snippet

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.

Show code snippet

Answered By: Michael Benjamin

Answer #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.

Answered By: Austin_K

Answer #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.

Answered By: leonardovff
The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .



# More Articles
how to set a radio button state to checked with css?
Handle multiple inputs of a form in php
Why use anything but div? [closed]
Show notification counter with bootstrap
Rails 3 / HAML: How can I output haml raw from a variable?
Autofocus only working on page refresh
How do I encode html for Bootstrap popover and tooltip content
CSS media queries get messed up
Preloading of html web page or non-flash web applications?
html5 href download attribute not working with .pdf file
Div Table with fixed right column
Why should I use conditional stylesheets?
IE11 input width changes when clicked
streteched-link bootstrap utilities doesn't work in Chrome
XPath in PHP Removes HTML Tags
How to Return Specific HTTP Status Code in a Plain HTML Page
sorting divs using jQuery
Photo grid like the new flickr design