CSS Grid gap vs Empty Divs for Footer-CodePudding

I am trying to build a footer like following

I am trying to use CSS Grid to implement this. I can divide the whole thing using grid-template- column and grid grid-template-row and keep empty divs in them except for content part or i can use grid - gap property but the gap is different between different columns. The first method seems hacky and in other method I would need to make columns equidistant. Can anyone guide me on how to best approach this?

CodePudding user response：

According to my understanding your main problem seems to be the left column, which you want to give margin-right: 0; but text won't be left aligned in that case: So, here is my approach:

<footer class='footer-container'>
    <div class='left-column'>
        <div >
             <!-- left column content-->
        </div>
    </div>
    <div class='middle-column'>
         <!-- middle column content-->
    </div>
    <div class='right-column'>
         <!-- right column content -->
    </div>
</footer> 
    
<style>
  .footer-container {
       display: grid;
       grid-template-columns: 2fr 1fr 2fr;
   }
    
  .left-column {
       display: flex;
       justify-content: flex-end;
       width: fit-content;
   }
    
   .middle-column {
       display: flex;
       justify-content: center;
    }
    
    .right-column {
       display: flex;
       justify-content: flex-start;
    }
    
</style>

CodePudding user response：

There are many ways to achieve that. As you mentioned one of them is using grid-template-* properties. The other option you mentioned is grid-gap/gap.

The third option is to split the row into columns (eg. 12) using grid-template-rows: repeat(12, minmax(auto-fill, 1fr)) and then use grid-area's to define where particular areas start and end. Thanks to that you can have more granular flexible width of columns (if you need even more granular you can use more than 12 columns, eg. 24). You can still use gap to adjust it a bit.

<div >
  <div ></div>
  <div ></div>
  <div ></div>
</div>

.container {
  display: grid; 
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr;
  gap: 0px 5px; 
}
.Benchmark { grid-area: 1 / 1 / 2 / 5; }
.Navigation { grid-area: 1 / 6 / 2 / 8; }
.Social-links { grid-area: 1 / 9 / 2 / 13; }

Demo: www.grid.layoutit.com?id=VhvjWF7