css - изменить размер зазора или изображения на основе ширины контейнера

Question

Я пытаюсь создать простую отзывчивую галерею изображений с числом столбцов по умолчанию по умолчанию 3. По мере того, как ширина окна становится меньше, количество столбцов также должно уменьшаться (сначала до 2 и, наконец, до 1).

Существующий код работает нормально, но в тот момент, когда изображения будут сфокусированы на наличие двух столбцов, они выравниваются влево, оставляя уродливое пространство в правой части #container.

Как бы я динамически увеличивал промежуток между изображениями, чтобы изображения все еще растягивались через #контейнер, сохраняя все горизонтально-симметричные в # контейнере? Может ли кто-нибудь помочь мне с этим.

Я попытался несколько очевидных кандидатов (например, #gallery IMG {выровняйте: центр}., Но ни один из них не работал

Решение/намек может быть CSS/дерзость и/или JS

<div id="container"> 
    <header><h1>My Gallery</h1></header> 
    <div id="filter"></div> 
    <div id="gallery"> 
     <img src="http://lorempixel.com/400/200/" alt="Gal" /> 
     <img src="http://lorempixel.com/400/200/" alt="Gal" /> 
     <img src="http://lorempixel.com/400/200/" alt="ggg" /> 
     <img src="http://lorempixel.com/400/200/" alt="gog" /> 
     <img src="http://lorempixel.com/400/200/" alt="Gallery" /> 
     <img src="http://lorempixel.com/400/200/" alt="Gallery" /> 
</div> <!-- end of gallery--> 
</div> <!-- end of container --> 

..

CSS:

#container { 
    width: 70%; 
    margin: 0 auto; 
    background-color: gray; 
    } 

Answer 1

Просто добавьте этот код в разделе

#gallery{ text-align: center;} 

CSS

Answer 2

Html:

<div id="container"> 
     <header><h1>My Gallery</h1></header> 
     <div id="filter"></div> 
     <ul id="gallery"> 
     <li> 
      <img src="http://lorempixel.com/400/200/" alt="Gal" /> 
     </li> 
     <li> 
      <img src="http://lorempixel.com/400/200/" alt="Gal" /> 
     </li> 
     <li> 
      <img src="http://lorempixel.com/400/200/" alt="Gal" /> 
     </li> 
     <li> 
      <img src="http://lorempixel.com/400/200/" alt="Gal" /> 
     </li> 
    </ul> <!-- end of gallery--> 
    </div> <!-- end of container --> 

Css:

#container { 
     width: 70%; 
     margin: 0 auto; 
     background-color: gray; 
     } 
    #gallery{ 
     width:100%; 
     list-style:none; 
     clear:both; 
     margin:0; 
     padding:0; 
    } 
#gallery:before, 
#gallery:after{ 
    content: " "; 
    display: table; 
    clear: both; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
    #gallery li{ 
     margin:0; 
     width:23.3333%; 
     height:auto; 
     display:block; 
     float:left; 
    } 
    #gallery li img{ 
     display:block; 
     margin: 0 auto; 
     width:100%; 
     max-width:100%; 
    } 

Тест на Codepen