search

rachelandrew / cssgrid-ama

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

fitting image inside grid cell height, and having the grid column grow to accommodate #126

Open teleclimber opened 6 years ago

teleclimber commented 6 years ago

Hi Rachel,

I am experimenting with using grid to layout mathematical formulas, however I am struggling with the sizing of images in a grid.

Please have a look at this pen: https://codepen.io/teleclimber/pen/PQZaOV?editors=1100

The rows are setup like this: grid-template-rows: 1em 1fr 1em;

I would like for the 1fr to stretch to fit the contents of the formula, and I would like the integral, which is 1 / 4 to stretch from top to bottom of whatever height that is. In doing so, it should make its column wider so that everything is properly spaced.

Does that make sense? And is there any way to do that? I've tried numerous combinations of grid-template-columns values for the first column (min-content, max-content), and different object-fit on the image, and nesting the image in a div, etc.. I feel like I tried everything, no matter what I do, I can't get the integral to fit full height and width into its area.

What's worst, in this latest iteration I am linking you to, the grid has taken on the full natural height of the integral SVG (854px) even though the representation of the image is shrunk down.

I really don't know where to go from here. Are there any tricks for working with images in Grid? Thanks for any help you can provide!