how to center columns and keep min column gap in a css grid

December 11, 2021

in the example below columns should be on center of page
resizing the page all free space should be distributed around all columns equally – so including the first and the last column
min column gap – 14px
row-gap – fixed – 14px
pls help

.wrap {
   padding:0 20px;
   display:grid;
   grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
   grid-column-gap:14px;
   grid-row-gap:14px;
}

.card {
  background:orange;
  height:25px;
}

<div class='wrap'>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
<div class='card'></div>
</div>

>Solution :

Added few rules to .wrap{…} selector. Hopefully this helps. Doesn’t do much here so test inside your actual code.

.wrap{
  padding:0 20px;
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  grid-column-gap:14px;
  grid-row-gap:14px;
  
  // rules to center below

  width: -webkit-fill-available;
  height: -webkit-fill-available;
  justify-content: center;
  align-items:center
}

.card{
  background:orange;
  height:25px;
}

<div class='wrap'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div>