How to display 3 columns in a row and the rest will display in the center using display grid?

Question

I have images(It will increase in the future) on my pages and I am using display: grid. Now My issue is, I have to show 3 columns in a row and the rest will display the center of the grid.

I am talking about display:grid not display:flex

I am getting the output like

My expectation output is this

.gridWrap {
  width: 1024px;
  margin: auto;
}

.gridWrap ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 25px;
  justify-content: center;
  list-style: none;
  padding-left: 0;
}

.gridWrap ul img {
  width: 100%;
}

<div class="gridWrap">
  <ul>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li>
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
  </ul>
</div>

Is this what you're looking for ? https://stackoverflow.com/questions/65168522/how-to-set-image-in-center-of-different-hight-and-width-using-html-and-css/65168718#65168718 — Elite Cardboard, Dec 07 '20 at 10:22
@EliteCardboard, Expected output is correct but they used display: flex. I am using display:grid. — user9437856, Dec 07 '20 at 10:27
Unless you add some javascript it won't be possible then like they explained there https://stackoverflow.com/questions/50234112/aligning-grid-items-across-the-entire-row-column-like-flex-items-can you can't achieve that with pure css and display grid — Elite Cardboard, Dec 07 '20 at 10:34

score 0 · Answer 1 · answered Dec 07 '20 at 10:36

0

I would recomend using of bootstraps <div class="row"></display> and then to have those 2 a tags in a div ,in the same block like <div class="col-sm-6"></div>,and then just use some random class on that like class="bottom-pictures",then just use align on that class..im super bad at css but im trying to help :D...

answered Dec 07 '20 at 10:36

Nikola Stojanovic

1

I can't use the bootstraps. I need pure css. – user9437856 Dec 07 '20 at 10:48

score 0 · Answer 2 · answered Dec 07 '20 at 11:11

I recommend you to use bootstrap So you can use Bootstrap Container to do this stuffs easily. But I have a solution for this using grid-column-start and grid-column-end.

.gridWrap {
  width: 1024px;
  margin: auto;
}

.gridWrap ul {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-gap: 25px;
  list-style: none;
  padding-left: 0;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.box2 {
  grid-column-start: 3;
  grid-column-end: 5;
}

.box3 {
  grid-column-start: 5;
  grid-column-end: 7;
}

.box4 {
  grid-column-start: 2;
  grid-column-end: 4;
}

.box5 {
  grid-column-start: 4;
  grid-column-end: 6;
}

.gridWrap ul img {
  width: 100%;
}

<div class="gridWrap">
  <ul>
    <li class="box1">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box2">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box3">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box4">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
    <li class="box5">
      <a href=""><img src="https://dummyimage.com/400x400/000/fff"></a>
    </li>
  </ul>
</div>

Hope this will work for you ..

Why you use grid-template-columns: auto auto auto auto auto auto auto;? — user9437856, Dec 07 '20 at 13:26
The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. value `auto` means The size of the columns is determined by the size of the container and on the size of the content of the items in the column . I divided the grid into 7 parts and allocate specific columns to specific boxes. ref : https://www.w3schools.com/cssref/pr_grid-template-columns.asp — N.Balgopal Patro, Dec 07 '20 at 13:58

How to display 3 columns in a row and the rest will display in the center using display grid?

2 Answers2