Dynamic number of columns, all centered, left side

Question

I have several tiles, anyway, the static width and height inside some container. The width of the container is dynamic. The number of tiles is dynamic. I need the tiles to “wrap” so that as much as possible fits on each row, but a new row is created when the number of tiles fills the width of the container. A complete range of tiles should be centered. A row of tiles that is not filled should be aligned with the full line (or positioned as if it were complete and centered). See the chart below.

In this diagram, green represents a container, black represents tiles.

, inline-block text-align: center . :

. HTML.

.container {
  border: 5px solid #0f0;
  width: 250px;
  text-align: center;
}

.tile {
  margin: 3px;
  display: inline-block;
  border: 5px solid #000;
  width: 50px;
  height: 40px;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

Hide result

Answer 1

TL; DR

CSS Grid Layout. , .container :

display: grid;
grid-template-columns: repeat(auto-fill, 60px);
grid-gap: 10px;
justify-content: center;

---

, , CSS Grid Layout, . , , , .

display: grid;

, .

grid-template-columns: repeat(auto-fill, 60px);

grid-template-columns CSS .

, . repeat(), . , auto-fill. 60px .tile (50px 10px ).

grid-gap: 10px;

grid-gap CSS - -, .

, grid-gap: 5px 10px;, . 10px .

justify-content: center;

, (), . CSS. flexbox, .

---

Demo

.container , .tile. Firefox 52 Chrome 57.

.container {
  border: 5px solid #0f0;
  width: 250px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  grid-gap: 10px;
  justify-content: center;
}

.tile {
  display: inline-block;
  border: 5px solid #000;
  height: 40px;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

Hide result

FF (F12) , :

Answer 2

flexbox, , .

: before : after, , , .

div {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

div > * {
  margin: 1rem;
}

div::before,
div::after {
  background: red; /* For demo only */
  display: block;
  content: "";
  width: 200px;
  height: 200px;
  margin: 1rem;
  order: 99999999;
}

<div>
<img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200"><img src="http://placehold.it/200x200">
</div>

Hide result

: , , . , - .

Edit2: div, JS, . , .

Answer 3

,

.container {
  border: 5px solid #0f0;
  width: 250px;
}

.tile {
  margin: 5px 10px;
  display: inline-block;
  border: 5px solid #000;
  width: 50px;
  height: 40px;
  text-align: center;
}

<div class="container">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

Hide result

, , - text-align .container .tile. . 5px 10px . . , , .