У меня есть 3 элемента, решил их сделать адаптивным с помощью CSS Grid.
.elements-wrapper {
position: relative;
clear: both;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 60px;
margin-bottom: 10%;
}
<div class="elements-wrapper">
<div class="element-1"></div>
<div class="element-2"></div>
<div class="element-2"></div>
</div>
Все работает, но на маленьких экранах где то после 1200 третий элемент опускается вниз и располагается по левому или по правому краю.
| element1 | | element2 | или | element1 | | element2 |
| element3 | | element3 |
А я хочу чтоб он был в центре. Ну примерно вот такой вид нужен.
| element1 | | element 2 |
|element 3 |