grid child positioning and margins
Yo.
I'm trying to figure out if there is a way to move the position of a grid-item inside the grid block. As you can see here, the text and image is spaced out quite a bit, so I wondered if there was a way to have the text sit on the far right of it's block (end?) and the image sit on the far left (start?)
https://codepen.io/Laing91/pen/JjxrJOb
no image on the codepen, but you get the jist with the border.
2nd part to this is how would you space the grid container from the icons? I thought obviously margin-top: 100px for example, but I remember using margin to position isn't ideal, so I wondered if there was a better solution?
8 Replies
an alternative I thought of is using a flex display for the projects and then adjusting the width of the text. In this case, width: 30% worked well.
If there's also a way to align the paragraph so the text all starts at the same vertical axis, that would be cool.
you are text-align center at the top
take them both off and just roll with this imo
limit your p with ch length or something
I didn’t think of that, looks better, thanks mate
Am I also better off using grid for the project ordering but flexbox for the individual projects? (Codepen is grid but the gap between the text and image is quite a lot). Flex seems to fix the gap for the most part
Just depends on how you want the children to behave and or control them.
flex wrap? or grid templates/areas
I’ll look into it after work. I just want the test like you’ve got it, but them to be closer together in the middle of the page, grid has them quite separated. Flex seems to work a little better, then using a grid container to keep them aligned as you scroll down would work well
Is this still a common way to limit the length of text?
ellipsis