Как поместить сетку изображений в карту Bootstrap

Question

У меня есть карта начальной загрузки с изображением ниже. Вместо одного изображения я хочу вставить сетку изображений. Как бы я это провел? Попытка объединить создает смещенный дизайн с пробелами

Код карты начальной загрузки:

<div class="card" style="width: 18rem;">
    <img class="card-img-top" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="Card image cap">
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Код изображения сетки:

<div class="grid-container">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
</div>

.grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-gap: 0em;
    padding: 0px;
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

Попытка объединить создает смещенный дизайн с пробелами:

<div class="card" style="width: 18rem;">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Использование MVC Net Core

Другие ресурсы обучения: Карты начальной загрузки не показываются, как в примерах

Answer 1

Изменение ширины столбцов с 100px на 1fr, и это работает независимо от ширины .card

.card {
  width:18rem;
  background: pink;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0;
    padding: 0px;
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

<div class="card">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>

Answer 2

Это ваше решение.

.card {
  width:18rem;
}

.grid-container {
    display: grid;
    margin:auto;
    grid-template-columns: auto auto; /* The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. */
}

img {
    width: 100%;
    height: auto;
    padding: 0px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<div class="card">
    <div class="grid-container">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/san-fransisco-768x432.jpg" alt="san francisco">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/london-768x432.jpg" alt="london">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/new-york-768x432.jpg" alt="new york">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/cape-town-768x432.jpg" alt="cape town">
    </div>
    <div class="card-body">
        Some quick example text to build on the card title and make up the bulk of the card's content.
    </div>
</div>

Answer 3

Попробуйте:

CSS

img {
  width: 49%;
}

Или лучше добавить пользовательский класс CSS для всех изображений внутри карты и присвоить ему width: 49%

демоверсия рабочего кода