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
MarkBoots
MarkBoots12mo ago
make the ul min-height: 100% and change it to display: flex with flex-direction: column the last item: margin-top: auto
No description
Psyzen
Psyzen12mo ago
Thank you for your answer. Is there a way to do with grid and without flex ? I am trying to learn grid.
MarkBoots
MarkBoots12mo ago
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-between
Psyzen
Psyzen12mo ago
Thank 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 :/
clevermissfox
clevermissfox12mo ago
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.
Psyzen
Psyzen11mo ago
Alrighty. Thank you.
Psyzen
Psyzen11mo ago
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:
nav {
display: grid;
align-content: space-between;
}
nav {
display: grid;
align-content: space-between;
}
It works the same. P.S. I think 🙂
clevermissfox
clevermissfox11mo ago
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
Psyzen
Psyzen11mo ago
The margin-block-start: auto doesn't seem to work. It seems in the MDN it says:
margin-block-start: 20%;
writing-mode: horizontal-tb;
margin-block-start: 20%;
writing-mode: horizontal-tb;
clevermissfox
clevermissfox11mo ago
You still need to have grid or flex declared, you shouldn’t need to declare the writing mode
Psyzen
Psyzen11mo ago
Ah right thanks.
Want results from more Discord servers?
Add your server