CSS网格视图适合最小2格的屏幕

Question

我有一些div，必须做一个网格。 现在我需要： 1）在水平方向上总是有最小2格，最大无穷大

2）水平div始终适合屏幕

3）您可以为div设置最小宽度，bcz div不能大于200px

4）div在任何类型的浏览器中都很灵活

5）仅css

Answer 1

#parent {
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;
            padding:2px;
        }
        .child {
            background: url(https://www.sample-videos.com/img/Sample-jpg-image-200kb.jpg);
            flex: 1;
            min-width: 25%;               
            box-sizing: border-box;
            border: 2px solid #382800;
            position: relative;  
            padding-top:35%;
        }
        @media (max-width: 700px) {
            .child {
                min-width: 33.33%;
                padding-top: 46.66%;
            }
        }

        @media (max-width: 400px) {
            .child {
                min-width: 50%;
                padding-top: 70%;
            }
        }
        .child_name {
            background: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 12px;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 16px;
            position: absolute;
            bottom:0px;
            right:0px;
            left:0px;
        }