我如何使用网格系统，以使文本框不会更改列大小

Question

What i mean.jpg （上图说明了我的问题）

我的代码：

<main>
  <div class="grid__container">
    <div class="grid__item__1">
      <img src="https://via.placeholder.com/600x150.png/b3dfbe">
    </div>
    <div class="grid__item__2">
      <img src="https://via.placeholder.com/600x150.png/75c5b8">
    </div>
    <div class="grid__item__3">
      <img src="https://via.placeholder.com/600x320.png/f16789">
    </div>
    <div class="grid__item__4">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__5">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__6">
      <img src="https://via.placeholder.com/200x165.png/8d96f3">
    </div>
    <div class="grid__item__7">
      <img src="https://via.placeholder.com/300x150.png/fac460">
    </div>
    <div class="grid__item__8">
      <img src="https://via.placeholder.com/300x150.png/fac460">
    </div>
    <div class="grid__item__9">
      <img src="https://via.placeholder.com/400x185.png/608cc9">
    </div>
    <div class="grid__item__10">
      <img src="https://via.placeholder.com/400x185.png/608cc9">
    </div>
    <div class="grid__item__11">
      <img src="https://via.placeholder.com/200x195.png/608cc9">
    </div>
    <div class="grid__item__12">
      <img src="https://via.placeholder.com/200x195.png/608cc9">
    </div>
    <div class="grid__item__13">
      <img src="https://via.placeholder.com/200x145.png/6653af">
    </div>
    <div class="grid__item__14">
      <img src="https://via.placeholder.com/600x135.png/6653af">
    </div>
    <div class="grid__item__15">
      <img src="https://via.placeholder.com/400x135.png/6653af">
    </div>
  </div>
</main>

我不知道如何使文本框不更改列大小