Kevin Powell - Community•14mo ago

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

CDLOP•14mo 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.

CDLOP•14mo ago

b1mind•14mo ago

you are text-align center at the top

b1mind•14mo ago

take them both off and just roll with this imo

b1mind•14mo ago

limit your p with ch length or something

CDLOP•14mo 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•14mo ago

Just depends on how you want the children to behave and or control them. flex wrap? or grid templates/areas

CDLOP•14mo 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

Gaming

Programming

grid child positioning and margins