How to make a footer grid?-CodePudding

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 >
  <div >
    <div >
      <div >
        <p>[email protected]</p>
        <p>Unsubscribe</p>
      </div>
      <div >
        <h5>Legal terms</h5>
        <p>Terms of Use</p>
        <p>Diclosures&Disclaimers</p>
      </div>
      <div >
        <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>

CodePudding user response：

if you need grid design,

These 2 lines will help you: grid-auto-flow: column; place-items: start center; in the .footer-content selector

there are spaced correctly,

with no complex % code,

and the code is only in the parent selector so you can add, delete divs and always be visible fine.

.footer-content {
  display: grid; /* I use grid since in the title there is so, I suggest flexbox instead */
  grid-auto-flow: column; /* element side by side like flexbox */
  place-items: start center; /* centering the justify, but align in start */
}

.footer-email {
  margin-right: 266px; /* put here the value you want */
}

<footer >
  <div >
    <div >
      <div >
        <p>[email protected]</p>
        <p>Unsubscribe</p>
      </div>
      <div >
        <h5>Legal terms</h5>
        <p>Terms of Use</p>
        <p>Diclosures&Disclaimers</p>
      </div>
      <div >
        <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>

CodePudding user response：

use flexbox!

.footer {
  display: flex;
}


.footer-email{
width:34%;
}

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

}

<footer >

 
    <div >
      <p>[email protected]</p>
      <p>Unsubscribe</p>
    </div>
    <div >
      <h5>Legal terms</h5>
      <p>Terms of Use</p>
      <p>Diclosures&Disclaimers</p>
    </div>
    <div >
      <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>

CodePudding user response：

.footer-content {
  display: flex;
  font-size: 14px;
}

.footer-email {
   width: 15%;
   margin-right: 20%;
}

.right-container {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

<footer >
  <div >
    <div >
      <div >
        <p>[email protected]</p>
        <p>Unsubscribe</p>
      </div>
      <div >
         <div >
          <h5>Legal terms</h5>
          <p>Terms of Use</p>
          <p>Diclosures&Disclaimers</p>
        </div>
        <div >
          <h5>Privacy info</h5>
          <p>Privacy Policy</p>
          <p>Cookie Policy</p>
        </div>
        <div>
          <h5>About</h5>
          <p>About Us</p>
        </div>
      </div>
     
    </div>
  </div>
</footer>