grid
How can we target the main-grid container grid lines for the grid item placed inside another grid container.(scale upwards)
30 Replies
not sure why your existing class
.text-image-section doesn't accomplish already.Thanks for responding.it accomplishes a grid green lines...blue lines are the main container grid lines
@ProdJuan ?
by making the .text-image-section a subgrid that spans over columns: 1 to -1
since i made the text-image-section a nested grid,now i am unable to position the scenary image (img-four) inside the nested grid because of the main grid line its occuping
there is no clean CSS method for moving nested elements into the main grid container.???
this is the way to nest grid. don't know what you think is not clean about it
ah, i see what you mean. in this case you don't want to span from 1 to -1. you can remove that line
i thought you wanted it to be the full width
now i need to move that car image of out the nest grid and span somewhere in the main grid
This is my question there is no clean CSS method for moving nested elements into the main grid container.???
If it is there then how?
ohw, no, indeed. But, why put it in that section in the first place (html)?
That is the requirement as per the design
I had designed for mobile devices that is why now large screen sizes is becoming messy
no, can't see a way. either you take it out of the html (level up), or you put the mountain image in it, you can not do half/half.
Not getting what do you mean?
you have 2 elements in text-image-section, but you want 1 item to be taken out of it.
maybe, you can get around with it by setting
.text-image-section {display: contents} , then the 2 elements will be childs directly of the main container.
bit hard to tell without live codeyes ,something works..
with display:contents
when do we use this property??
i did use this before we had subgrid.
or sometimes it is nice to just group things (just for clearness) but not wanting it to be grouped (it will just ignore that_
I have mentioned the code in Nested Grid post i have tagged you so that you can go through
unable to catch this point could you please explain?
here the second div will only show the contents, not the div itself. so hello and world are threated as direct siblings of eachother
cool, so you get the benefit of the group but w/o the structure insertion. neat!
indeed
it will show up in the html ofcourse, but it's not threated as such
so in media queries you can change it if you need
Great explaination!!
Got it
Thanks @MarkBoots @ProdJuan things are working as expected due to display:contents.Took 15 days to figure it out
One more doubt.
should the media queries min-width or max-width be in px or rem ?
probably you would like to use px. screenwidths/monitor sizes are fixed while rem can be a user specified value
Ya but then lot many posts do recommend to use rem only
for typography yes.
but a 1920 screen will be that, won't be changed by font size
The Surprising Truth About Pixels and Accessibility
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.
Go through the media queries section in this post
yea, there are pro's and cons to this. it depends on the project i guess
What do you suggest ?
if it is a one column layout .no side bars or such (those can vary in width due to rem font-size), I think px is okay. but that's personal pref
OK thanks for the help and information!
@MarkBoots please review the code for the deployed link https://assortedgridrwd.netlify.app and let me know your feedback on this.Would be a great help!
Given design link:https://codepen.io/abcretrograde/pen/rKOgWw
Stephen Lee
CodePen
Assorted cards & images (CSS Grid + BEM)
A card layout with various sizes, containing images and/or text. Using BEM to try to keep the code organized (and to help keep the design consistent)....