количество столбцов с медиа-запросом - PullRequest
0 голосов
/ 03 марта 2019

Я пытаюсь получить сетку из 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>
...