DEV Community

loading...

SOLVED:4 column footer with plain css

Vicente G. Reyes
Building Indiependent.to | ICVN Tech Studio | Musician | https://t.co/IR2ZEbjzm5 | https://digest.icvn.tech
・1 min read

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 */
}

Discussion (0)