Grid last element
https://codepen.io/LCSNeo/pen/VwggLRO
I am trying to move the last li item to the bottom. I tried align-self but it doesn't seem to work.
12 Replies
make the ul min-height: 100% and change it to display: flex with flex-direction: column
the last item: margin-top: auto
Thank you for your answer. Is there a way to do with grid and without flex ? I am trying to learn grid.
with grid this is difficult. grid items are connected to eachother.
You could set the
grid-template-rows: repeat(8, max-content) 1fr and then put the contents of the last item to the bottom.
But this won't scale as easily. if you have an extra item, you'll need to adjust the template-rows
or you break the structure in 2 parts, then you could do space-betweenThank you once again. Is there any negatives for using position:fixed and bottom:0 on the last li element. It does what I need but I wasn't sure if this is the best way :/
I would not advise using fixed for this use case. Depending on the viewport, it could result in some issues you don’t expect.
Like Mark suggested, the easiest way may be to put the first group into a ul , then use
space between on your grid.Alrighty. Thank you.
Oh. I was wondering how would that work in HTML thanks. I was thinking to put nav in a header and create second nav, totally forgot you could make second ul. Very insightful. Thank you.
I managed to change from your flex to grid:
It works the same. P.S. I think 🙂
Yep either works, just preference. Much better solution that using fixed position. You could omit and just use margin-block-start: auto on that second ul as well
The margin-block-start: auto doesn't seem to work.
It seems in the MDN it says:
You still need to have grid or flex declared, you shouldn’t need to declare the writing mode
Ah right thanks.