{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/sticky-footer-using-flexbox-and-grid/", "result": {"data":{"markdownRemark":{"html":"

Requirement

\n\n

Using CSS Grid Layout

\n
src/App.js
\n
import React from "react";\n\nconst App = () => {\n  return (\n    <div className="wrapper">\n      <header>Header</header>\n      <main>Dynamic Content. I can grow or shrink as I wish.</main>\n      <footer>&copy; 2021, All Rights Reserved</footer>\n    </div>\n  );\n};\n\nexport default App;
\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n}\n\n.wrapper {\n  min-height: 100vh;\n  display: grid;\n  grid-template-rows: auto 1fr auto;\n}\n\nheader {\n  width: 100%;\n  height: 4rem;\n  display: grid;\n  place-items: center;\n  background-color: black;\n  color: gray;\n  font-size: 2rem;\n  font-weight: bolder;\n}\n\nmain {\n  width: 40rem;\n  margin: 0rem auto;\n  padding: 1rem;\n  font-weight: bold;\n}\n\nfooter {\n  width: 100%;\n  height: 3rem;\n  display: grid;\n  place-items: center;\n  background-color: black;\n  color: gray;\n}
\n

We have placed the main dynamic content in the 1fr track. The 1fr track will take all the available space and will grow to fill the gap.

\n

As we can see, the footer sticks to the bottom of the viewport.

\n

\n \n \n \n \n

\n

Using Flexbox

\n

We can also create a sticky footer using Flexbox.

\n
src/index.css
\n
* {\n  padding: 0;\n  margin: 0;\n  box-sizing: border-box;\n}\n\nhtml {\n  font-family: sans-serif;\n}\n\n.wrapper {\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  width: 100%;\n  height: 4rem;\n  display: grid;\n  place-items: center;\n  background-color: black;\n  color: gray;\n  font-size: 2rem;\n  font-weight: bolder;\n  flex-shrink: 0;\n}\n\nmain {\n  width: 40rem;\n  margin: 0rem auto;\n  padding: 1rem;\n  font-weight: bold;\n  flex-grow: 1;\n}\n\nfooter {\n  width: 100%;\n  height: 3rem;\n  display: grid;\n  place-items: center;\n  background-color: black;\n  color: gray;\n  flex-shrink: 0;\n}
\n

flex-shrink:0 prevents the header and the footer from shrinking smaller when content fills the main araea.

\n","frontmatter":{"title":"Sticky Footer Using Flexbox & Grid","date":"2021-06-16"}}},"pageContext":{"slug":"/sticky-footer-using-flexbox-and-grid/","prev":{"fields":{"slug":"/understanding-classes-in-javascript/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/how-to-set-up-private-routes-in-react/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}