Keep grid design on mobile?

You still need to apply what said here:

https://ww.wp.xz.cn/support/topic/keep-grid-design-on-mobile/#post-15548456

Click on the Grid, is there any value in the horizontal gap field?

If so, remove it.

If not, can you link me to the page so I can see what’s going on?

It’s because you are using thumbnail size of the images which is set to 200px in width.

4 x 200px = 800px which means 4 columns of the images only takes 800px width.

So if the image size looks ok for you, you can set the inner container width to 800px instead of 1100px.

Otherwise you’ll need to use bigger size of images to fill the columns.

Hi there, so for using thumbnails for smaller images, I just need to add more columns?

Yes, you can.

any smart technique I could use like copy a container with images into another container?

Do not use copy as it copy paste the element with same id which might cause problem.
You can select the element and click the 3 dots icon > duplicate. This will generate a new set of element with new IDs.

The additional CSS(es) class field in block editor is to enter CSS class, not CSS.

You can enter a class, eg: blur-img to the entire container block.

Then add this CSS to customizer > additional CSS:

.blur-img img {
    -webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
     filter: blur(5px);
}

1. It should be, but image block is WP core block, I’m not sure what’s going on.

2. It’s tricky. You can set amax-height for the Grid block, then make it overflow-y:hidden;

3. It’s because it’s not the right way to make your layout. You should only need 4 container block under the Grid, and keep on adding images to the 4 containers. If you add 5th container, it will wrap.