css grid variable column width and wrapping

Question

I have what I thought was a simple task : given x items, show them in a grid, with each column being the width of the content. If the number of columns exceeds the width of the container, create a new row and continue

I have managed to get the columns to display and wrap, but only if I define a fixed-width for the column

https://stackblitz.com/edit/angular4-dxkvmt

how can I make each "label" on each row fit to the content but move to a new row when the number of labels would exceed the available view space ?

I have tried

grid-template-columns: repeat(auto-fill,max-content);

this gives one row per label

grid-template-columns: repeat(auto-fill,minmax(20px,max-content));

makes all columns 20px .. but they do flow properly on resize

would appreciate some pointers. I am not particularly skilled at css grid so may have overlooked something easy

Jereme

You could try using display: flex and flex-wrap: wrap instead of grid. – Caddell

yeah - that seems to go quite some way to solve the issue ;) I'll need to check a couple more things before I confirm this as the answer. thanks! – Jereme

Unfortunately what you require is not possible with CSS-Grid. It needs at least one hard coded number to work with to initallise the grid. Flexbox is your best option. – Dorelle

This is the only thing I feel where CSS Grid falls short. I was hoping there would be a solution to this very common problem. Will have to resort to the good old Flex but I had developed a habit for Grid now. :( – Chaisson

@ParamSingh bit late, but Grid is not designed to be a catch-all, just like Flexbox was not. You can use Grid and flexbox together, by design, for things that one of them can't handle by itself :-). – Konstanz

Answer 1

I thought about doing the same, start with a grid of 12 frames and go down to something like 8fr and end with 4fr. E.g.

grid-template-columns: repeat(4, 1fr);

Then, using a media query I realised that besides of making smaller the grid I should also make bigger the size of the layers, where the limit of the number of frames to span would the size of the grid. For instance, lets image this basic grid:

.layout.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px 24px;
    gap: 16px 24px;

   .frame, .row {
    display: grid;
    place-items: center;
    grid-column: auto;
  }

  .span-1 {
    grid-column: auto / span 1;
  }

  .span-2 {
    grid-column: auto / span 2;
  }

  .span-3 {
    grid-column: auto / span 3;
  }

  .span-4 {
    grid-column: auto / span 4;
  }

  .span-5 {
    grid-column: auto / span 5;
  }

  .span-6 {
    grid-column: auto / span 6;
  }

  .span-7 {
    grid-column: auto / span 7;
  }

  .span-8 {
    grid-column: auto / span 8;
  }

  .span-9 {
    grid-column: auto / span 9;
  }

  .span-10 {
    grid-column: auto / span 10;
  }

  .span-11 {
    grid-column: auto / span 11;
  }

  .span-12, .row {
    grid-column: auto / span 12;
  }
}

It will look like this

But in the media query, lets say screen and (max-width: 1278px) there is a code like

.layout.grid {
    grid-template-columns: repeat(4, 1fr) auto;

    [class^="span-"], .row {
      grid-column: auto / span 4;
    }

    .span-1 {
      grid-column: auto / span 1;
    }

    .span-2 {
      grid-column: auto / span 2;
    }

    .span-3 {
      grid-column: auto / span 2;
    }
}

The result looks like this

The size of the frame is delimited to 1fr and you must be aware of the order of the frames as well. You can start from this point forward to build a more mature solution. But I think you get the idea.

Ashanti

Answer 2

Have you tried this:

grid-template-columns: repeat(auto-fill, min-content);

or

grid-template-columns: repeat(auto-fill, max-content);

Not sure if this is the result you desire, but this is what I understood of it. Both had similar results, 2 rows with the items inside.

Applicator

thanks for taking time to comment - however I did already try that – Jereme

So you want the spacing of the items to be exactly the same, like grid-template-columns: repeat(auto-fill,minmax(20px,max-content)); but without the fixed width? – Applicator

Are you downvoting a dead topic? Also, the fact that you mention a thread that was made AFTER this reply makes me question your attitude. – Applicator

@Applicator Maybe I'm misunderstanding StackOverflow etiquette but I'm downvoting because the solution doesn't work (and presumably never did, since it violates the spec). Regardless of whether the topic is dead, a lot of people like me will stumble upon this suggestion and potentially waste time attempting to use it. – Branton