我可以用纯 CSS 居中自动填充网格吗？

Question

I'm trying to fill my page horizontally with as many blocks as possible and center the result.

I want the grid to be able to resize when the window becomes smaller:

wide window
xxx

small window
xx
x

Is this possible to achieve without javascript?

 .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; }.box:nth-child(2) { background-color: blue }.grid { display: grid; grid-template-columns: repeat(auto-fill, 200px); }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

To explain the desired centering visually:

Can the yellow highlighted area be evenly distributed on either side?

The desired box alignment:

Answer 1

Try this with flexbox.

 .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; } .box:nth-child(2) { background-color: blue } .grid { display: flex; justify-content: center; align-items: center; } @media screen and (max-width: 767px) { .grid { flex-wrap: wrap; justify-content: center; } .box { width: 50% } }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

Answer 2

This only works in chrome for some reason.

---

Auto-fit and auto-fill needs a known width to calculate from, we can do that with max-width:100% instead of using width which will stretch it and prevent us from centering, and avoid fixed widths.

 .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; } .box:nth-child(2) { background-color: blue } .grid { display: grid; grid-template-columns: repeat(auto-fill, 200px); max-width: 100%; } .center { display: flex; flex-direction: column; align-items: center; }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

---

There is a quirk with this, if you start with a wide viewport then resize it to a smaller one, the grid won't be centerd because of auto-fill

Say you have 3 elements but the container can fit 4 with auto-fill it will create a forth column but we have no forth element so it will look unevenly spaced.

I suggest using auto-fit , which instead of creating the forth column it will split the space evenly on each side.

 .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; } .box:nth-child(2) { background-color: blue } .grid { display: grid; grid-template-columns: repeat(auto-fit, 200px); max-width: 100%; } .center { display: flex; flex-direction: column; align-items: center; }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

---

Now if you resize the window enough you'll see sometimes it's not evenly spaced that's because of the relative unit on the max-width, it need to recalculate the width because it's based on the parent and parent's width which is based on the content.

we can trigger that recalculation using an animation.

chrome specific solution

 .center { display: flex; flex-direction: column; align-items: center; } .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; } .box:nth-child(2) { background-color: blue } .grid { display: grid; grid-template-columns: repeat(auto-fit, 200px); max-width: 100%; animation: recalc 5s linear infinite; } @keyframes recalc { to { max-width: 99.9%; } }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

---

To support at least FF and maybe some other browsers, use viewport units.

 .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; } .box:nth-child(2) { background-color: blue } .grid { display: grid; grid-template-columns: repeat(auto-fit, 200px); max-width: 100vw; margin:0 auto; } .center { display: flex; }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

Answer 3

I wouldn't use grid for this. Use flex :

 *{ box-sizing:border-box; padding:0; margin:0; font-size:0; } html,body{ width:100%; height:100%; background:#ccc; } .box{ width:200px; height:150px; background-color:white; border:6px solid red; } .box:nth-child(2n+2) { background-color:blue; } .center,.grid{ display:flex; align-items:center; justify-content:center; height:100%; } .grid{ min-width:600px; flex-wrap:wrap; align-items:center; }

 <div class='center'> <div class='grid'> <div class='box'></div> <div class='box'></div> <div class='box'></div> <div class='box'></div> <div class='box'></div> </div> </div>

Answer 4

Yes, you can centre a left-aligned grid (and it works in Firefox).

To do this, you just need justify-content: center; on the grid container, which would give you this:

A good example of this (and why it works) is on the MDN docs page for justify-content

Your example would look like this:

 .box { box-sizing: border-box; width: 200px; height: 150px; background-color: white; border: solid 6px red; }.box:nth-child(2) { background-color: blue }.grid { display: grid; grid-template-columns: repeat(auto-fill, 200px); justify-content: center; /* <-- This is all you need to add */ }

 <div class="center"> <div class="grid"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div>

It's worth noting though, that when you only have one row of boxes, they may not be centred, since the repeat function will create empty columns to fill the row, effectively left aligning the actual boxes: