The first available release of Flexbox was generally available in 2013.. CSS Grid defined in 2012 and generally available in 2017. CSS Grid is also known as CSS Grid Layout.
Both have strengths and weaknesses. Does CSS Grid replace Flexbox? Not by my recknoning.
I think of CSS Grid as a "layout" tool. It defines areas of a page much better than Flexbox. Flexbox is better at handling content – well, for the most part. You can still use CSS Grid for content too ... it's just not as concise and effective used that way.
CSS Grid has earned a spot in my HTML5 boilerplate kit to shift the footer to the bottom of a page when insufficient content exists ... and then to stay at the bottom of the page when the content increases past the boundaries of the viewable section of a page.
Whether you use Flexbox or CSS Grid, for the footer to stay at the bottom of the page you need to define your page with three vertical elements. A header, main contents, and footer. For CSS Grid, essentially, that would be (more concise):
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
That's it. The first three vertical elements of your page are covered. They can be semantic or div's with classes.
With Flexbox, you need a bit more:
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
body > main {
flex: 1;
}
You have to be more specific with Flexbox and use the exact tag (or class name) you want to define as the expanding contents area with a minimum height to fill the entire screen. Note the use of "body > main {" ... I am using the > selector to make sure that only the "main" tag directly under body tag is targetted. If I want to use "main" tag within a card or other component, the flex: 1 directive will not apply to those. Also note that I have previously pointed out that I use "modern-normalize" in my boilerplate. It already has body margin set to 0.