Positioning containers inside a flex container, using the "middle portion of the page"
Really poorly illustrated but I'm effectively trying to accomplish this. My portfolio (https://www.callum-laing.com/) is one of those where I'm not fully utilizing the entire width of the page.
Something I've always struggled with, and hoped that learning grid would maybe help with, is trying to have my Contact section split like the image I've attached. I did attempt grid-areas but that just ended up with the form on the far-left side of the page, and the socials right next to it. Flex is probably my best bet but I'm not really sure how to go about handling coding it.
Ignore the mess, I've just copy pasta'd my portfolio code into a codepen, scroll to the bottom for container section š https://codepen.io/pen/
49 Replies
So you have lots of control either way. Cause I like that you tried grid areas here is just one way you could do it. Lots depends on how you want the children to behave responsively. Also do you want them to be dense or fill the avail space at any points.
I only really have github + linkedin to go on the right side, so I guess it's going to need to fill a decent-ish amount of space (large svg/text I guess). For the time being though I just want it to really look kinda like how I have my hero page.
Also seem to be having trouble trying to center my damn button xD (would also say, the non-clicked button color seems kinda shitty huh?)
errr forgot to save there we go lol
iiiiiiiiiinteresting
I imagine for this to work I'm going to need to remove the flexbox I have on the section container, right?
I didn't see your pen cause you didn't link it right
I would put it on the section
and not have the extra div
You don't have to give the area to the following divs cause they will just fall in place
but the first div will need the title name
grid-area: title;Ah, yea sorry forgot I even had that div.
Ok that looks a bit better
contact form is huge on a fullsized monitor, but I'm not sure I can do much about that
always can do something.. Add a break point where you think its too big or just a max-width on the element
or control it with the grid-template-cols
you got options
.contactContainer { max-width: 600px; works wellI think that looks better.. did some tweaks
the background on the contact form looked a little odd, removed it
Thanks b1 š
glad I could help, had me at grid areas xD
Really love grid now I've learned it lol
Also I love this kinda template for cards too. and
auto 1fr is great for titles/bodyyeah my project cards section is gridded up
auto 1fr auto great for header/body/footer too
body grows head/foot stay the same size xD (or rather stay "dense")Oh oh I found an issue with this D:
learning to fool with when to justify/align/place with content and items is key too
So I took the contact section out of the flexbox I had setup originally
so weirdly now my projects section looks like this
self will make things dense is a good gotcha too
yeah tbh I didn't even know place-self was a thing
you can in flex box too š
nice when you want a child to miss behave from parents placement
I'll use it lots when layering too https://codepen.io/b1mind/pen/jOQYXrP
plop a absolute on a grid child too and you can abuse self
place-self: end vs bottom/right: 0; (and can be more responsive when you need it)
šmaking notes of this š
I fixed the projects bit
all I need to do now is uhh.. bring the height of contact me down a wee bit
it's a little.... high
all that "white" space š
mmm your codepen not doing that xD
did you forget template-rows: auto 1fr` as we were talking about it
xD
This is one the things I love about grid. Is it will want to fill space by default
so then its the other dives and center
do justify-items: center; not place
then they with default to align-items: start
the min-height 100vh >.>;; hah
so you are deff filling with that too
yeah i'm not a fan of it
2 things I gotta work on. A) setting the view height and B) positioning where things should sit vertically on the page
I only use the 100% "hack" cause of mobile issues but yea it can be a pita sometimes to always fill haha
'least it's filling lmao
So if you want things to get dense you have options too
Do what you do in flex to fill (but reverse lol)... and limit the height: fit/max-content;
Or align-self: start; will make it go dense.
or on parent I think align-content: start; ?
err items lol
content keeps growth xD
I think because of how little I have on this page, it's probably a smarter idea to just center the form, and stick the links inside the form, but to the right of it
I would just let the content determine height on this one
give it spacing and brrr
designer career incoming
ayo
well it already is isnt it with auto 1fr on the rows?
designers everywhere triggered
ugh don't, I have such bad ocd, I've already fixed it on my mspaint
I'm the son of a carpenter, plum and level eye š¤£ least that is what I tell myself when I don't use guidelines
One the things I love about figma is how it does the pos helpers
So for the heading yes auto will make the content of the row dense not the items inside it.
but the 1fr will fill avail space
which you use 100vh and well yea lots of space xD
but if you let the content decide height the 1fr will just expand to meet it
that make sense?
that is where minmax(200px, 1fr) and stuff comes in real handy too
cause you can set a min height and max out 1fr to always grow
Yeah that makes sense
I tried the flex version I mentioned and that is probably a better idea, considering how little content I have on the page at the moment
Aight we're done
Thanks for the help b1!