CSS Grid with fixed childs and variable columns

  • I’m looking for a CSS grid implementation wherein the children are of a fixed size and the columns vary depending on the width of the viewport.

    Many WP Themes and CSS Layouts seem to have fluid layout meaning the columns are pre-defined and the children are scaled depending on the width. This causes horrible looking thumbnails.

    A JSfiddle or even a link to a website that implements this would be great. Thanks for the help.

Viewing 3 replies - 1 through 3 (of 3 total)

  • I’m not sure if what you’re looking for is logically possible. If the contents of the page are a fixed width, how do they line up with the columns, if a column’s individual width is based on the width of the viewport? Or am I misunderstanding what you want?

    Thread Starter CartwrightKM

    (@cartwrightkm)

    Sorry about that, I wasn’t clear earlier.

    I mean that the children would have a fixed size and the number of columns would vary depending on the width of the viewport.

    For example, with a fixed child of 300px width, there would be 3 columns in a 1024px width viewport. This would shrink to 2 columns if the viewport was say, 800px. And on a 400px cellphone, only one column would be present.

    You might try Susy for this. It allows you to set a fixed 300px width for each individual column, and you can set the number of columns in your container on a per-media query basis.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Grid with fixed childs and variable columns’ is closed to new replies.