DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 963,200 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Vicente Reyes
Vicente Reyes

Posted on

SOLVED:4 column footer with plain css

4 column footer with plain css

0

I have a 4 column footer that uses float: left;. I want to use the CSS Grid for showing 4 columns without using float:left;. I've tried grid-template-columns: 1fr 1fr 1fr 1fr; with float:left; and it works but when I remove float: left;, it breaks.

Here's the image…

Answer:

  • Move grid-template-columns: to .footer-container
  • Add display: grid to .footer-container
.footer-container {
  background-color: green; /* Optional */
  display: grid;
  grid-gap: 1rem; /* Optional */
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 1rem; /* Optional */
}

.column {
  background-color: yellow; /* Optional */
  padding: 1rem; /* Optional */
}
…

Top comments (0)

🌙 Dark Mode?!

Turn it on in Settings