How can I set the divs to be in the center and not scattered when scrolling?

Hello, I haven't been able to deal with one thing for a long time. I would like these divs to be in the middle in three or four elements like in the image? I use portfolio and modal. I don't know what else to write, I showed everything in the picture. Best regards and thanks for help.
No description
20 Replies
Jochem
Jochemβ€’12mo ago
use grid we can't really help more than that without seeing your code, preferably in codepen or something similar
bartke
bartkeβ€’12mo ago
Jochem
Jochemβ€’12mo ago
change .portfolio to this:
.portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-around;
padding: 20px;
}
.portfolio {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: space-around;
padding: 20px;
}
bartke
bartkeβ€’12mo ago
Yeah that's I wanted but its this okay if I am scrolling and elements are scattered? I send image but also I want to have in center. I'll be glad if u help
No description
Jochem
Jochemβ€’12mo ago
I'm not sure I understand what you're asking
bartke
bartkeβ€’12mo ago
Sorry my english is bad. Just like in the image above I would like to have these divs (my portfolio) have it in the middle. If scrolling, it should be like in this picture.
No description
bartke
bartkeβ€’12mo ago
When I scroll, there are large spaces and I would like it to be closer. Do you understand what I am asking? πŸ˜„
No description
Jochem
Jochemβ€’12mo ago
ah, you should set a max-width on the portfolio items and then replace justify-content: space-around; with justify-content: center;
bartke
bartkeβ€’12mo ago
Okay let me try that
Jochem
Jochemβ€’12mo ago
depending on the portfolio items, you may not have to set the max-width
bartke
bartkeβ€’12mo ago
Yeah that's I wanted! But I changed this code "justify-content: center;" but it doesn't seem to work. The elements are still from the left, not in the middle.
Jochem
Jochemβ€’12mo ago
can you update the codepen?
bartke
bartkeβ€’12mo ago
Here you have
Jochem
Jochemβ€’12mo ago
ah, I forgot the grid will space across the entire width of the grid parent, which is 100% of the viewport. Add width: fit-content; to the .portfolio class
bartke
bartkeβ€’12mo ago
I think its looking fine for me but still I don't have my elements in middle like "text-align: center" margin-left: auto; margin-right: auto; I added to .portfolio and now its in middle. It's okay to use those codes? πŸ˜„
Jochem
Jochemβ€’12mo ago
sorry, got distracted by work πŸ˜… Yeah, that's fine you could also make .wrapper display: flex, or use grid, but using margin:auto is fine too
bartke
bartkeβ€’12mo ago
It's okay, don't worry. Please do not close the topic, if I need something, I will write here so as not to constantly create a new topic. Thanks for help! πŸ˜„
Jochem
Jochemβ€’12mo ago
if it's a separate issue, we actually prefer if people create new topics even if it's something different with the same site / project, please make a new topic. If there's other issues with this grid layout, you can post more stuff in here.
bartke
bartkeβ€’12mo ago
Sure no problem
Want results from more Discord servers?
Add your server