0

It's great that grids are automatically responsive, i.e. the number of columns will adjust based on the width available.

Unfortunately, it seems to be only the columns themselves that respond, the width of the grid itself takes up all the available space. Is it possible to limit the width of a grid to the total width of its columns (plus any gaps and padding)?

For instance, if I define my grid as:

grid-template-columns: repeat(auto-fit, 300px);
gap: 10px;

I would like my grid to have an inner width of 610px when it displays two columns, or 920px when it displays three columns. It should be constrained to this width, and not fill its parent's available width.

Please see this example to see what I'm talking about.

David L. Walsh
  • 24,097
  • 10
  • 61
  • 46
  • Inline-grid might get you closer but it may not solve your problem completely. The box model just doesn't work that way. – Paulie_D Oct 09 '20 at 05:51
  • 1
    https://stackoverflow.com/questions/37406353/make-container-shrink-to-fit-child-elements-as-they-wrap – Paulie_D Oct 09 '20 at 05:53

0 Answers0