css - 带有媒体查询的列数

Question

我正在尝试使用列数和媒体查询来获得一个由 8 个图像组成的网格来填充页面的整个宽度，但是在指定 5 或 6 列时，右侧有一个空列。

这也会发生：

使用 9 或 10 张图片时，6 列不起作用 使用 11 张图片时，5 列不起作用

任何线索表示赞赏，谢谢

body {
  margin: 0;
  font-family: Tahoma, sans-serif;
    font-size: 23px;
}

html{
    background-color: grey;
}

.imgcontainer {
	line-height:0;
   	column-gap:0px; 
   	column-width: 100px;
    background:rgba(0, 50, 150, 0.3);
}

.myimg {
	width: 100% !important;
  	height: auto !important;
  	background:white;
}

.txt{
	position: absolute;
	padding: 15px;
}

#textid1 {
	background: pink;
	    	display:none;
}

#textid2 {
	background: yellow;
	    	display:none;
}

#textid3 {
	background: cyan;
	    	display:none;
}

#textid4 {
	background: grey;
	    	display:none;
}

#textid5 {
	background: red;
    	display:none;
}

#textid6 {
	background: green;
    	display:none;
}

@media screen and (max-width: 1000px) {
    .imgcontainer {
        column-count: 6;
    }/**/
    #textid1 {
    	display:none;
    }
    #textid2 {
    	display:none;
    }
    #textid3 {
    	display:none;
    }  
    #textid4 {
    	display:none;
    }
    #textid5 {
    	display:none;
    }
    #textid6 {
    	display:block;
    }
}

@media screen and (max-width: 900px) {
    .imgcontainer {
        column-count: 5;
    }/**/
    #textid1 {
    	display:none;
    }
    #textid2 {
    	display:none;
    }
    #textid3 {
    	display:none;
    }  
    #textid4 {
    	display:none;
    }
    #textid5 {
    	display:block;
    }
    #textid6 {
    	display:none;
    }
}

@media screen and (max-width: 800px) {
    .imgcontainer {
        column-count: 4;
    }/**/
    #textid1 {
    	display:none;
    }
    #textid2 {
    	display:none;
    }
    #textid3 {
    	display:none;
    }  
    #textid4 {
    	display:block;
    }
    #textid5 {
    	display:none;
    }
    #textid6 {
    	display:none;
    }
}

@media screen and (max-width: 700px) {
    .imgcontainer {
        column-count: 3;
    } 
    
    #textid1 {
    	display:none;
    }
    #textid2 {
    	display:none;
    }
    #textid3 {
    	display:block;
    }  
    #textid4 {
    	display:none;
    }
    #textid5 {
    	display:none;
    }
    #textid6 {
    	display:none;
    }
}

@media screen and (max-width: 600px) {
    .imgcontainer {
        column-count: 2;
    }
    
    
    #textid1 {
    	display:none;
    }
    #textid2 {
    	display:block;
    }
    #textid3 {
    	display:none;
    }  
    #textid4 {
    	display:none;
    }
    #textid5 {
    	display:none;
    }
    #textid6 {
    	display:none;
    }
}

@media screen and (max-width: 500px) {
    .imgcontainer {
        column-count: 1;
    }
    
    #textid1 {
    	display:block;
    }
    #textid2 {
    	display:none;
    }
    #textid3 {
    	display:none;
    }  
    #textid4 {
    	display:none;
    }
    #textid5 {
    	display:none;
    }
    #textid6 {
    	display:none;
    }
}

    <div id="wrapper">
    	<div id="textid1" class="txt">1 column</div>
		<div id="textid2" class="txt">2 columns</div>
		<div id="textid3" class="txt">3 columns</div>
		<div id="textid4" class="txt">4 columns</div>
		<div id="textid5" class="txt">5 columns</div>
		<div id="textid6" class="txt">6 columns</div>
        <div id="container">
			<div id="contentwide">
				<div class="imgcontainer">
					<img class="myimg" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
					<img class="myimg"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/440px-Google_2015_logo.svg.png"/>
			  </div>  
			</div>

		</div>