Flex Solution

First, the simplest, and in my opinion, the best solution, using flexbox. I’d say this is the simplest because it isn’t that much code to write and it’s simple to understand.

Grid Solution

Let’s move on to the second solution, using CSS grid. Now I don’t know about you but I don’t like grid. I’d much rather use flexbox, but, as much as I hate to admit it, sometimes there is just no avoiding it.

main {
grid-row-start: 2;
grid-row-end: 2;
}

Wrapper Solution

Finally, we have reached our last solution which is using a wrapper. The HTML for this solution is as follows:

Conclusion

In conclusion, there are many ways to keep the footer at the bottom, however, in this article, I just mentioned three, the flex way, the grid way, and finally the wrapper way.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store