Grid Spacing
I'm attempting to re-create this reference image for css practice however i'm unsure of the method on how to close the gap between the event and image grid items, I've provided the reference image and the issue i'm having below along with a codepen of what i currently have. Any help, pointers or tips would be much appreciated.
https://codepen.io/deerCabin/pen/mdQBjag
19 Replies
Why don't you simply put them both inside a container?
And define the height as (2) and width as (1) (forgot if it's h/w or w/h).
They both could be self-contained by another parent inside, but both live inside the sub-grid container* (re-phrased it).
ah i can't believe that didn't cross my mind 😅 , thank you for your help, little new to css here 😅
No problem. You're trying, and that's what counts. Keep it up.
thank you, will do!
i'll fix the text on the inside in just a moment, i believe i've done it 😄, i have one question though if that's okay.
after implementing your fix, from the output it gives it seems like it can also be achieved using 2 rows rather than 3 like i have here, but when i tried that the "systems" container item grew to the length of the "event" container, what i'm trying to ask is why you need 3 rows for what looks to be a 2 row grid?
It could be 2 or 3 to be honest, it depends on how you set it up.
It all depends on how you define the child's behavior, or the grid's behavior.
Do you have your code updated?
ah i see
yeah i got it updated
but when i tried that the "systems" container item grew to the length of the "event" containerCould you show me an example of this?
i've just tried it again with two rows and it seems to be functioning as expected now, sorry for taking your time with that, i'm not sure what went on the previous time i tried
I tried reproducing it, but couldn't, so I thought I wasn't understanding well.
Glad you found the solution.
ah no my fault completely, thank you. and as it's always good to check the layout and methods of your code for improvements, from what you've seen, that's a sufficient way of doing it?
In the end what matters is to be comfortable with your own code.
I could do it differently, but that's not necessarily better.
In real world scenarios, when you need scalability, you could find some improvement using frameworks, but plain CSS is just fine as it is.
You can even accomplish this purely with position absolute, but the question is, if you want it to be responsive, or have accessibility, it's all up to your requirements, so there's better methods than others, but again, depending on the requirement.
yeah i get what you're saying, if i was to make it responsive (as it's always a good set of knowledge to know how to do that), would i need to make any changes or is what i have with some adaptations to the grid using media queries all good?
Well, in this case you always need to question your requirements.
What should be the behavior of each of the elements when resizing/going to smaller screens?
Answering that question would lead you to what you could use for it.
well for example, lets say we take off the first column so we're left with "systems", space and the rocket image, that'd just be adpating the 3 columns to 2 and changing the grid-template-areas layout in media queries etc right?
Could be, if you want the image to span across 2.
There's many possibilities:
- Making images to be in one line (block), so each element should be using the whole row.
- You could make it so certain images disappear.
- There's the possibility of setting a fixed width and forcing scrolling.
- You could either keep the layout and make them all resize based on the parent's size (100% of the width).
Like I mentioned above, understanding your requirements (or the requirements) paints the picture clearer in your mind to what it would need to be done.
yeah i see now, i think i'll go and experiment around with different layouts using media queries and your mentioned methods etc to get a better understanding of that sorta thing, thanks for your help.
No problem, happy coding 
😄👍