Arrangement of grid boxes

Question

I’m having difficulties to format the following grid, when I have several boxes, the format is correct.

When only one box is added/shown, the grid picks up 100% of my father div, and I’d like it to be 155px

<div class="grid">

<?php for ($i = 0; $i < 15; $i++) :?>
    <a href=""><div class="mbp">
        box grid            
    </div></a>
<?php endfor;?>

</div>

.grid {
  display: grid;
  width: 900px;
}

.grid { 
  grid-template-columns: repeat(auto-fit, 
  minmax(155px, 1fr));
  grid-gap: 10px 10px;
}

.grid a > div {
  display: flex;
  flex-flow: column;
  height: 290px;
  border: 1px solid transparent;
}

Answer 1

Try using your css this way, follow the link from documentation flexbox.

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: black;
  padding: 5px;
  width: 155px;
  height: 50px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
  <li class="flex-item">2</li>
  <li class="flex-item">3</li>
  <li class="flex-item">4</li>
  <li class="flex-item">5</li>
  <li class="flex-item">6</li>
  <li class="flex-item">7</li>
</ul>

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: black;
  padding: 5px;
  width: 155px;
  height: 50px;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

<ul class="flex-container">
  <li class="flex-item">1</li>
</ul>

Answer 2

Man from what I understand you want to do basically you’re changing the auto-fit for auto-fill. the auto-fit the cell of Grid grows to occupy the entire width of the tell if there are no more children. With auto-fill the cell of Grid doesn’t grow, even if you only have one child.

Follow the image code above.

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.grid {
	display: grid;
	width: 900px;
}

.grid {
	grid-template-columns: repeat(auto-fill,
			minmax(155px, 1fr));
	grid-gap: 10px 10px;
}

.grid a>div {
	display: flex;
	flex-flow: column;
	height: 290px;
	border: 1px solid transparent;
}

<div class="grid">
	<a href="">
		<div class="mbp">
			box grid
		</div>
	</a>
	<a href="">
		<div class="mbp">
			box grid
		</div>
	</a>
	<a href="">
		<div class="mbp">
			box grid
		</div>
	</a>
</div>