Как изменить размер нескольких изображений рядом, чтобы соответствовать текущему размеру экрана?

Question

У меня есть div с 5 строками и несколькими изображениями. HTML выглядит примерно так:

<div id="row3" class="row">
        <div id="im15" class="column">
            <img src="img/img15.jpg" alt="movie">
        </div>

        <div id="im16" class="column">
            <img src="img/img16.jpg" alt="movie">
        </div>

        <div id="im17" class="column">
            <img src="img/img17.jpg" alt="movie">
        </div>

        <div id="im18" class="column">
            <img src="img/img18.jpg" alt="movie">
        </div>

        <div id="im19" class="column">
            <img src="img/img19.jpg" alt="movie">
        </div>

        <div id="im20" class="column">
            <img src="img/img20.jpg" alt="movie">
        </div>

        <div id="im21" class="column">
            <img src="img/img21.jpg" alt="movie">
        </div>
    </div>

У меня они рядом, и мой css выглядит так:

html, body {
    background-color: #222222;
    overflow: hidden;
}

.column {
    float: left;
}

.column img {
    width:  200px;
    height: 300px;
    padding: 1px;
}

.images {
    opacity: 0.4;
}

.row {
    clear: both;
    display: table;
}

Он работает и отображает все изображения должным образом уложенными без остатка места на моих ноутбуках с размером экрана, но для больших экранов это не получается.

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

Буду признателен за любую помощь.

Answer 1

Попробуйте использовать систему сетки.

grid-template-columns определяет, сколько столбцов вы хотите разделить, в текущем примере я делю 3 столбца со значением 1fr 1fr 1fr.

grid-gap определяет промежутки между каждой сеткой.

Дополнительную информацию о системе координат CSS можно найти в этом видео на Youtube: https://www.youtube.com/watch?v=jV8B24rSN5o&t=1325s&frags=pl%2Cwn

Это очень полезно, когдаделать некоторые макеты с помощью CSS.

 .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 1em;
  }

  .box {
    border: 1px solid teal;
  }

  .box img {
    width: 100%;
    height: 100%;
  }

<div class="container">
    <div class="box">
      <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
    <div class="box">
        <img src="" alt="">
    </div>
  </div>

Answer 2

Вы также можете использовать функцию повтора, чтобы сделать более чистое решение.

grid-template-columns: repeat(3, 1fr); // good practice

grid-template-columns: 1fr 1fr 1fr; // works as well.