CSS Issue - стовпці автоматично змінюються, коли вікно браузера зменшується / збільшується - css, width, margin, center, multiple-columns

Сподіваюся, на це питання буде легко відповісти - це мене надзвичайно спантеличує:

Я створив свою сторінку на увазі Pinterest - розділяючи основний вміст на стовпці. Я вказав стовпці так:

#Content {
width: auto;
margin: 0px auto;

-moz-column-count:auto;
-webkit-column-count:auto;
column-count:auto;

-moz-column-gap: 20px;
-webkit-column-gap: 20px;
column-gap: 20px;

-moz-column-width: 294px;
-webkit-column-width: 294px;
column-width: 294px;
}

#Body {
width: 100%;
}

При зміні розміру браузера кількість стовпцівзбільшується та зменшується для розміщення екрана. Однак і лівий, і правий стовпці плоскі проти бічної частини екрана - проміжки між стовпцями залишаються стійкими на 20 пікселів - але ширина кожного стовпця збільшується, щоб заповнити залишилися прогалини.

Чи є спосіб, як я можу отримати його як Pinterest - там, де зазори між стовпцями залишаються фіксованими, а ширина стовпця залишається фіксованою - при цьому поле зліва та праворуч вмісту змінюється?

Відповіді:

Ви хочете щось подібне? Змініть розмір броуера, щоб побачити 3 різних розміри.

Кодування тут ..

Приклад на весь екран тут.

CSS:

@media screen and (min-width: 768px) {
.col {
width:18%;
float:left;
margin:0px 1%;
}
img {
width:100%;
height:auto;
margin-top:6%;
}
}
@media screen and (max-width: 767px) {
.col {
width:30%;
float:left;
margin:0px 1%;
}
img {
width:100%;
height:auto;
margin-top:6%;
}
}
@media screen and (max-width: 480px) {
.col {
width:45%;
float:left;
margin:0px 1%;
}
img {
width:100%;
height:auto;
margin-top:6%;
}
}