Multi Column Footer

A multi column footer built with pure HTML and CSS that organizes large sets of links, resources, or information into clearly separated vertical columns, improving navigation and readability without relying on JavaScript or external libraries.

Usage

This component is ideal for websites with broad information architecture, such as corporate sites, SaaS platforms, documentation hubs, e-commerce stores, or content networks where footer navigation needs structure and clarity.

Implementation

The layout is implemented using CSS grid or flexbox with responsive column behavior, allowing the footer to display multiple columns on larger screens while stacking gracefully on smaller devices.

HTML

<footer class="ss-footer columns">
  <div>Company</div>
  <div>Resources</div>
  <div>Support</div>
</footer>

<footer class="ss-footer columns">
  <div>Company</div>
  <div>Resources</div>
  <div>Support</div>
</footer>

CSS

.ss-footer.columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:40px;
  background:#020617;
  color:#e5e7eb;
}

.ss-footer.columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  padding:40px;
  background:#020617;
  color:#e5e7eb;
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Supports multiple structured columns
• Improves discoverability of footer links
• Adapts cleanly to different screen sizes
• Designed for large, information rich footers

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.