search

rachelandrew / cssgrid-ama

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

CSS Grid img fitting div #120

Open domainoverflow opened 6 years ago

domainoverflow commented 6 years ago

Hi, Thank you so much for opening this space. I like CSS Grid very much and I am adapting over 210 layouts to it and I have read CSSgridByExample entirely and dozens of articles about it. I have arrived at the base layout using css grid that fits our context, but without creating a complicated question explaining our env, it would be really amazing to hear from you the following, if possible, thanks in advance for your time:

-Is there possibly a difference in result when applying properties using the id (hash) css as opposed to the dot ( class ) notation when trying to resize the picture (img within div within grid) so it fits the div (grid's container) ?

-What is your preferred or recommended way of fitting an img, that is within a div, and the div is within the grid ? Is it better to have the img directly under the grid wrap ( not within a div ) ?

As of now I have collected 12 (twelve) different/distinct methods written in various blogs and articles and with a few exceptions, it breaks easy when using dynamic runtime content. I'd be happy to give a full account of the context, but it would also be great to understand the actual recommended way. I could not find a precise example in cssgridByExample.com, but it pointed me here..

thank you for your time,

domainoverflow commented 6 years ago

update: the only workaround found was to convert every single "grid-template-areaS" ( and their respective "grid-template-area [on the grid items]") to "grid-column" and "grid-row". There is a difference somewhere down the pipe that makes "grid-area(s)" _to have a different result than grid-row/grid-column when creating dynamic CSS Grids via JavaScript.
We would like to understand what is such "down the pipe difference". It would be great if you -or anyone- could point us to the right path to further understand it. This pattern is consistent throughout all browsers, surprisingly. There is a secondary workaround, and that is to use sub-grids but this can become a recursive trap.