1

I am hoping this will be a simple one, I have looked at the other submissions but they either are not what I am looking for or too complex, I have learning difficulty's so I have done my own simple code.

I have .wrapper which is 4 columns and grid-auto-rows: 250px;, If I populate the .wrapper with 4 DIV's then the first line is full, now if I add a 5th, this one goes onto a new row, however, it's to the left on the first column, is there anyway I can make the DIV's appear beginning at the center on that row?

In the end I made a separate .wrapper with 1 column.

.wrapper {
  border: 1px solid black;
  padding: 10px;
  max-width: 700px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
}

.box {
  padding: 5px;
  border: 1px solid blue;
}
<div class="wrapper">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
evansd321
  • 11
  • 2

1 Answers1

0

Maybe this is what you want so please take a look at this https://jsfiddle.net/n4tyrhdL/ I just added id="fifth-box" in your fifth div and in css I put

#fifth-box {
  grid-column: 2/ span 2; /* grid-column-start: 2; grid-column-end: 2;  */
}
indefinite
  • 383
  • 1
  • 5
  • 18