I'd like to change the number of columns according to the width of the screen with the image in three horizontal rows.

In the future, it is expected that masonry layout will make it easy for to use this flag only on Firefox.

ul{
  list-style: none;
}

li{
  background: #cc;
}


.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:masonry;
  grid-auto-flow:row;
  gap —20px;
}

.grid img{
  width: 100%;
/*   height —auto;*/
}

<div class="test">
    <ul class="grid">
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="120">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="100">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="320">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="100">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="100">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="320">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="140">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="170">/li>
        <li><img src=https://www.pakutaso.com/shared/img/thumb/penfanresIMGP4683_TP_V.jpg width="180" height="120">/li>
    </ul>
</div>

So at this point, I wonder if I will be using the flexbox as described in Oori's answer...

You may be able to use Flexbox.
Line it up vertically and fold it back into three rows.

At that time, the height of the box in the list (not the width) will cause it to fold back and continue to the next row.
(height changes accordingly)

.content{
    width —200px;
    height:230px;
    border —1px solid# c3c3c3;
    display:flex;
    flex-wrap:wrap;
}

#col{
    flex-direction:column;
}

.box{
    width —50px;
}

.red{
    background-color:red;
    height —50px;
}

US>.lightblue{
    background-color:lightblue;
    height —70px;
}

US>.yellow{
    background-color: yellow;
    height —50px;
}

<section>
    <article>
      <divid="col" class="content">
        <div class="box red">A</div>
        <div class="box lightblue">B</div>
        <div class="box yellow">C</div>
        <div class="box red">D</div>
        <div class="box lightblue">E</div>
        <div class="box yellow">F</div>
        <div class="box red">G</div>
        <div class="box lightblue">H</div>
        <div class="box yellow">I</div>
      </div>
    </article>
  </section>

Therefore, if you want to arrange them in three rows, you may need to find the following height.

If you are able to get the overall length when you get the image list, you may be able to hit it appropriately at 1/3+α length with calc.

In addition, JavaScript can be used to determine whether the width is narrow or not. If you calculate the height of the list box as 1/2 of the length, it can be displayed in 2 columns

Note: (developer.mozilla.org)

• Flexbox
• Mastering Flex Item Returns

I have prepared a code that I can check with Google Colab or Jupiter.

 from ipywidgets import Layout, Button, Box, VBox
from random import landint
box_layout=Layout(display='flex',
                    flex_flow = 'column wrap',
                    width = '40%', height = '400px',
                    border='thin solid blue')

arr = [landint(30,200) for n in range(10) ]
# The arr[n]`-4` number is probably Button's margin or something (you can usually ignore it).
items=[Button(description=f'{n}', layout=Layout(width='120px', height=f'{arr[n]-4}px'), button_style='warning')
         for n in range (len(arr))]
display(VBox(children=items, layout=box_layout))

deffn(arr,ncol):
    height,mod=divmod(sum(arr),ncol)
    if mod : height + = 1
    s,it_arr = 0, it(arr)
    for n init_arr:
        s+=n
        ifs<height:continue
        ncol - = 1
        ifncol==1:
            return if n+sum(it_arr)>height else height
        height, s = s, 0

# The value of `+3` is pad or margin or something...Usually (in html) you can ignore it.
box_layout.height=f'{fn(arr,3)+3}px'

If you want to arrange items of different heights in order from the top,

As for Layout, as @hinaloe said, we will have to wait until the product layout (Masonry_Layout) appears and becomes popular.

Currently, elements in HTML cannot be arranged as they are, so JavaScript will need to be imported and relocated once

• Keep the elements in the form of an array and arrange them in the display stage (for example, use fetch to obtain them from the server side)
• If you're dealing with elements in HTML, take them into an array

If you want to relocate using JavaScript, you can do the following:

• How to specify attributes such as top, left, and so on and fix coordinates
• Prepare three (or two) Flexboxes and arrange them side by side.Align vertically within one Flexbox

First, set the height of each column to 0 and update the height of each column while adding items
The column to add is the lowest height column. If there are more than one column, the column to the left.
(or any unique way you want)

If you're not using JavaScript, you might be able to use Vue or React

Note:

• Understanding client-side JavaScript frameworks

• Start React

• (Vue.js version)vue-masonry

Understanding client-side JavaScript frameworks

Start React

(Vue.js version) vue-masonry