CSS Выравнивание по сетке

Question

Я пытаюсь сделать свой веб-сайт адаптивным, но у меня небольшая проблема с сеткой css.

Я не понимаю, как выровнять карточки по правой границе верхнего изображения .

Итак, первый столбец находится в правильном положении, а два других должны быть справа.

html:

    <!-- info -->
         

Великий Северный

15 Малхолланд Драйв, Твин Пикс

+ 41 151515

greatnorthern@hotel.com

css:

.info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
    width: 100%;
}


.images {
    margin-top: 20px; 
    grid-gap: 10px;
    width: 50%;
}

.images-show {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.images img{
    width: 200px;
    height: 150px;
}

@media(max-width: 900px) {
    .info {
        grid-template-columns: 1fr;
    }
    .images {
        width: 100%;
    }
}

Answer 1

Я думаю, что основная проблема в том, что ваши изображения являются прямыми дочерними элементами контейнера сетки и имеют фиксированную ширину 200 пикселей. Таким образом, независимо от того, что вы делаете, они не могут занять все пространство.

В этот момент лучшее, что вы можете сделать, это, вероятно, добавить элементы justify-items в контейнер сетки, например:

.images-show {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  justify-items: center;
}

Теперь они не будут идеально выровнены, но они точно выровнены по центру.

Я бы сделал, однако, каждое отдельное изображение внутри своего собственного div (еще лучше <figure> тег). Тогда у вас будет больше возможностей изменять размер и стиль изображений.

Answer 2

попробовать обертку

display: flex; 
justify-content: space-between;