Sage comes with a footer sidebar ready to go, so we will change this to a 3 column grid where it will space out 1-3 widgets across the bottom of the footer. Sage comes with an empty stylesheet for the footer scss, but first let’s create the class we need to style it as we need. Load up the footer template, located in resources/views/partials/footer.blade.php

In this file we have a container that sets the margins on the left and right and puts the content in the middle, this is opened after the footer so we can target the footer background color directly and it will be full width. We do however need to create a new DIV which will become our grid container. Here is my footer file with the new div and class added :

<footer class="content-info">
  <div class="container">
     <div class="widget-grid">
    @php dynamic_sidebar('sidebar-footer') @endphp
    <div>
  </div>
</footer>

To setup the grid we need to go to resources/assets/styles/_footer.scss and we will target the widget-grid class we just added.

.widget-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2rem;
  margin: 20px;
}

This creates a grid that spreads out 3 columns equally across the available space. Note that you can easily change the number of supported columns and widgets if you wanted 4 widgets across the footer just change to this repeat(4, 1fr);

Our previous widget styling CSS needs a little update for the footer as it will be over a different color background. Here is the CSS to update the background color and change the font and line colors.

footer.content-info {
  background-color: theme-color("primary");
  color: #f0f0f0;
}

footer .widget h3 {
  border-bottom-color: theme-color("secondary-yellow");
}

footer .line {
  border-bottom-color: theme-color("navtop");
}

footer a {
  color: white;
}

If we add a few widgets to the footer sidebar we will end up with something a little like this :

Spend a little time styling these widgets, the contact one would look great with a few FontAwesome icons, perhaps add social icons here also.