How to make a footer grid?

July 29, 2022

I need to create a footer for a website. It has 4 divs, but the first div has more margin on the right than the rest – 266px. How to properly arrange the columns in the footer so that there is good adaptability and indents according to the layout?

<footer class="footer">
  <div class="container footer-container">
    <div class="footer-content">
      <div class="footer-email">
        <p>support@gmail.com</p>
        <p>Unsubscribe</p>
      </div>
      <div class="legal-terms">
        <h5>Legal terms</h5>
        <p>Terms of Use</p>
        <p>Diclosures&Disclaimers</p>
      </div>
      <div class="privacy-info">
        <h5>Privacy info</h5>
        <p>Privacy Policy</p>
        <p>Cookie Policy</p>
      </div>
      <div>
        <h5>About</h5>
        <p>About Us</p>
      </div>
    </div>
  </div>
</footer>

>Solution :

use flexbox!

.footer {
  display: flex;
}


.footer-email{
width:34%;
}

.legal-terms,.privacy-info,.about{
width:22%; 

}

<footer class="footer">

 
    <div class="footer-email">
      <p>support@gmail.com</p>
      <p>Unsubscribe</p>
    </div>
    <div class="legal-terms">
      <h5>Legal terms</h5>
      <p>Terms of Use</p>
      <p>Diclosures&Disclaimers</p>
    </div>
    <div class="privacy-info">
      <h5>Privacy info</h5>
      <p>Privacy Policy</p>
      <p>Cookie Policy</p>
    </div>
    <div class='about'>
      <h5>About</h5>
      <p>About Us</p>
    </div>
  

</footer>