display grid with minmax and centering elements

Question

in a scenario like below how to place elements in the center of wrap
margins around elements can be elastic, but min 14px

.wrap{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 100px));
    grid-column-gap:14px;
    grid-row-gap:14px;
    width:calc(100% - 30px);
    margin:0 auto;
    background:silver;
}
.el{
height:20px;
background:orange
}

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

score 2 · Accepted Answer · answered Nov 02 '20 at 08:21

2

add justify-content: center; into .wrap

answered Nov 02 '20 at 08:21

kel

141
4

display grid with minmax and centering elements

1 Answers1