css grid alignment of 3 elements

Question

I have 3 elements, I decided to make them adaptive using css grid.

<div class="elements-wrapper">

  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-2"></div>

</div>

write this CSS code

.elements-wrapper{
  position: relative;
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 60px;
  margin-bottom: 10%;
}

everything works, but on small screens somewhere after 1200 the third element is released to the bottom and is located on the left or right edge.

 | element1 | | element2 |    or    | element1 | | element2 |
 | element3 |                                     | element3 |

And I want that in center. Well about that kind of need.

 | element1 |  | element 2 |
        |element 3 |

Have you looked at this question? https://stackoverflow.com/questions/46276793/how-to-center-elements-on-the-last-row-in-css-grid — Florin Simion, Oct 13 '17 at 10:56
Possible duplicate of [How to center elements on the last row in CSS Grid?](https://stackoverflow.com/questions/46276793/how-to-center-elements-on-the-last-row-in-css-grid) — Felix D., Oct 13 '17 at 11:04

score 0 · Accepted Answer · answered Oct 13 '17 at 18:22

It isn't clear from your question if the elements width is known before hand or not.

Since you state that the problem is related to a max width of 1200, I think that it is, so that you can handle this problem with different styles inside a media query.

In this case, this could be a solution:

.elements-wrapper{
  position: relative;
  clear: both;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 60px;
  margin-bottom: 10%;
}

.element-1 {
  background-color: tomato;
  height: 50px;
}

.element-2 {
  background-color: lightblue;
  height: 50px;
}

.element-3 {
  background-color: lightgreen;
  height: 50px;
  grid-column-start: 1;
  grid-column-end: 3;
  width: 300px;
  margin:  auto;
}

<div class="elements-wrapper">
  <div class="element-1"></div>
  <div class="element-2"></div>
  <div class="element-3"></div>
</div>

css grid alignment of 3 elements

1 Answers1