I am creating a grid that contains as many 100 pixel column tracks as will fit into the container with the remaining space shared equally between the columns.
My minimum width is 100px and maximum is 200px.
My goal is to make a full grid of 100px. And if the grid is not full on the first row (ie. only 3 boxes), then those three boxes are aligned in the center. If the boxes do not fill the grid, I want to be able to just add a class to center the boxes to the screen width.
My problem is that sometimes I can fill the grid using auto-fit and auto-fill, but not center when the boxes when the first row is not filled.
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr) ) ;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr) ) ;
And then if I set the maximum to 200px, I am able to center it, but the grid leaves empty spaces at the end of the rows.
grid-template-columns: repeat(auto-fill, minmax(100px, 200px) ) ;
This is my codepen, and hopefully it'll be a better visual Codepen. I am trying to avoid javascript. I am open to doing this in another way if repeat(auto....) is not the way to go.
body {
margin: 40px;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
background-color: #fff;
color: #444;
list-style: none;
margin: 0;
padding: 0;
}
.wrapper--2 {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
.wrapper--3 {
grid-template-columns: repeat(auto-fit, minmax(100px, 200px));
}
.wrapper--center {
justify-content: center;
}
.box {
background-color: #444;
color: #fff;
border-radius: 5px;
padding: 20px;
font-size: 150%;
}<h2>Using Auto-fill</h2>
<p>Desired result: When the grid is full</p>
<p>Actual result: Seems to work</p>
<ul class="wrapper">
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
</ul>
<div style="padding: 1em"></div>
<p>Desired result: Center when the grid is not full</p>
<p>Actual result: Added class wrapper--center, but not centered</p>
<ul class="wrapper wrapper--center">
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
</ul>
<div style="padding: 1em"></div>
<hr/>
<h2>Using Auto-fit with Maximum 1fr</h2>
<p>Desired result: When the grid is full</p>
<p>Actual result: Looks like it works</p>
<ul class="wrapper wrapper--2">
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
</ul>
<div style="padding: 1em"></div>
<p>Desired result: Center when the grid is not full</p>
<p>Actual result: Using auto-fit, makes the width fill the screen</p>
<ul class="wrapper wrapper--2 wrapper--center">
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
</ul>
<div style="padding: 1em"></div>
<hr/>
<h2>Using Auto-fit with Maximum 200px</h2>
<p>Desired result: When the grid is full</p>
<p>Actual result: There are empty spaces at the end of the rows</p>
<ul class="wrapper wrapper--3">
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
</ul>
<div style="padding: 1em"></div>
<p>Desired result: Center when the grid is not full</p>
<p>Actual result: Added wrapper--center, and the boxes are centered, but the boxes are stuck at 200 width and not responsive</p>
<ul class="wrapper wrapper--3 wrapper--center">
<li>
<div class="box a">A</div>
</li>
<li>
<div class="box b">B</div>
</li>
<li>
<div class="box b">C</div>
</li>
</ul>
<div style="padding: 1em"></div>
