Html CSS-阻止布局更改

我有一个在屏幕上生成的图像网格。网格上一行中的图像数量取决于页面的大小。这一切都很好，直到页面变得太小，然后布局就消失了

CSS:

如果页面变得比4x4网格小，那么网格仍然保留，而不是改变，我可以这样做吗？

将CSS更改为：

.g {
        padding: 0.25em;
            overflow: hidden;
        }
        .g li {
            float: left;
            width: 20%;
            padding: 10px;
            padding-left: 10px;
            border: 2px solid black;
            background: #fff;
            background-repeat: repeat; 
            background-size: cover;
        }
        .g img {
         max-width: 100%
            display: block;
        }
            .g li:nth-child(5n+1) {
                clear: left;
            }
            .g li:nth-child(4n+1) {
                clear: none;
            }

编辑：

只需卸下第一个媒体包装

.g {
        padding: 0.25em;
            overflow: hidden;
        }
        .g li {
            float: left;
            width: 50%;
            padding: 10px;
            padding-left: 10px;
            border: 2px solid black;
            background: #fff;
            background-repeat: repeat; 
            background-size: cover;
        }
        .g img {
         max-width: 100%
            display: block;
        }

            .g li {
                width: 25%; 
            }
            .g li:nth-child(4n+1) {
                clear: left;
            }
            .g li:nth-child(3n+1) {
                clear: none;
            }
        @media screen and (min-width: 72em) {
            .g li {
                width: 20%; 
            }
            .g li:nth-child(5n+1) {
                clear: left;
            }
            .g li:nth-child(4n+1) {
                clear: none;
            }
        }

---

是否可以保留我所有的代码，但要添加一个检查，看看页面是否小于某个大小，是否可以将网格保持在25%或4列？我看不出其中的要点。您只需要取消代码，这与删除代码相同。编辑：另外，默认代码的宽度为100%，一列。@media标记使其宽度为20%。您要删除的代码将网格设置为4列或5列，删除它将删除网格的任何布局。我想保留4列或5列，但不要让它变小时弄乱。你仍然希望它变为4列，但不能再少？是的，这就是我想要它做的。

.g {
        padding: 0.25em;
            overflow: hidden;
        }
        .g li {
            float: left;
            width: 50%;
            padding: 10px;
            padding-left: 10px;
            border: 2px solid black;
            background: #fff;
            background-repeat: repeat; 
            background-size: cover;
        }
        .g img {
         max-width: 100%
            display: block;
        }

            .g li {
                width: 25%; 
            }
            .g li:nth-child(4n+1) {
                clear: left;
            }
            .g li:nth-child(3n+1) {
                clear: none;
            }
        @media screen and (min-width: 72em) {
            .g li {
                width: 20%; 
            }
            .g li:nth-child(5n+1) {
                clear: left;
            }
            .g li:nth-child(4n+1) {
                clear: none;
            }
        }