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?
No description
8 Replies
CDL
CDL12mo ago
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.
.proj-one {
display: flex;
justify-content: center;
align-items: center;
}
.proj-one {
display: flex;
justify-content: center;
align-items: center;
}
If there's also a way to align the paragraph so the text all starts at the same vertical axis, that would be cool.
CDL
CDL12mo ago
No description
b1mind
b1mind12mo ago
you are text-align center at the top
b1mind
b1mind12mo ago
take them both off and just roll with this imo
No description
b1mind
b1mind12mo ago
limit your p with ch length or something
CDL
CDL12mo ago
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
b1mind
b1mind12mo ago
Just depends on how you want the children to behave and or control them. flex wrap? or grid templates/areas
CDL
CDL12mo ago
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
p {
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
width: fit-content;
white-space: nowrap;
}
p {
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis;
width: fit-content;
white-space: nowrap;
}
Is this still a common way to limit the length of text? ellipsis
Want results from more Discord servers?
Add your server