search

rachelandrew / cssgrid-ama

Ask me anything about CSS Grid Layout
323 stars 12 forks source link

CSS Grid auto-fill with srcset & sizes #142

Open IAmAdamTaylor opened 6 years ago

IAmAdamTaylor commented 6 years ago

Hi Rachel,

Firstly, thanks for doing this AMA. I've created a layout using CSS Grid and repeat( auto-fill, minmax(200px, 1fr) ); to create a fluid amount of columns.

Inside those columns are components with an image that spans the whole width of the column. I'm using the srcset & sizes attributes to make the images responsive and save data for users where possible.

How should I set the sizes attribute to account for the changes in the number of fluid columns from Grid? As far as I know the sizes and media queries inside them should always match the width the image is defined at - please correct me if this is wrong.

rickyruiz commented 5 years ago

Did you find the answer to this question @IAmAdamTaylor ?

IAmAdamTaylor commented 5 years ago

Unfortunately not.

I think the best approach is to set it as closely as possible. For my example above the largest a column could ever be (before a new track is created) is 400px, so I set the attribute to that.

<img sizes="400px">

This ensures that the largest possible image is used, without scaling it up and causing pixelation.

This example didn't require any media queries. If you are changing the layout, for example from a grid to a media object style, then you will need to add these.

domainoverflow commented 5 years ago

No. In fact, I asked a serious question about CSS grid 2 years ago, without a reply. Looked around. And moved on. Too late now.