SOLVED:4 column footer with plain css

twitter logo github logo ・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 */
}
twitter logo DISCUSS
Classic DEV Post from Jun 20

Do you use time-tracking for work or for your personal time?

highcenbug🇵🇭 profile image
Freelance Developer | Volunteer Developer at Project: Website

Sore eyes?

dev.to now has dark mode (in public beta).

Go to the "misc" section of your settings and select night theme ❤️