Возможно ли централизовать сетку, используя только CSS?

Question

Рассмотрение сетки, содержащей элементы фиксированного размера (не мой выбор) и не является фиксированным размером.

Я хотел бы централизовать контейнер (.grid-container), чтобы иметь тот же боковый край независимо от того, сколько его элементов и как они помещаются внутри контейнера, если они выровнены по левому краю.

Если это невозможно сделать только с CSS, как я могу использовать JavaScript?

Нет необходимости использовать twitter-bootstrap Сетка системы, как демо-код.

Here код для иллюстрации: https://embed.plnkr.co/F6niiwaosnO8tr0ss4XF/

.container { 
 
    background-color: #2B3643; 
 
} 
 

 
.grid-container { 
 
    padding: 30px 30px 0 30px; 
 
} 
 

 
.grid-item-wrapper { 
 
    width: 200px; 
 
    margin-bottom: 15px; 
 
} 
 

 
.grid-item { 
 
    margin-bottom: 15px; 
 
} 
 

 
.grid-item > .item-desc { 
 
    padding: 8px; 
 
    background-color: #333333; 
 
    color: #CFCFCF; 
 
} 
 

 
    
 

 

<div class="container"> 
 
    <div class="grid-container row"> 
 
     <!-- grid items --> 
 
    </div> 
 
    </div> 
 
    <template id="tmpl_grid_item"> 
 
    <div class="grid-item-wrapper col-xs-3"> 
 
     <div class="grid-item"> 
 
     <div class="item-picture"> 
 
      <img src="http://lorempixel.com/350/200/food/" style="width: 100%;" /> 
 
     </div> 
 
     <div class="item-desc"> 
 
      Lorem Ipsum 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </template>

Answer 1

Если вы готовы использовать абсолютное позиционирование и CSS3, есть способ.

HTML:

<div class="grid"> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
    <div class="item"></div> 
</div> 

CSS:

.grid{ 
    position: absolute; 
    width: auto; 
    left: 50%; 
    -ms-transform: translateX(-50%); /* IE 9 */ 
    -webkit-transform: translateX(-50%); /* Safari */ 
    transform: translateX(-50%); 
} 

.item{ 
    width: 50px; 
    height: 50px; 
    background: #fff; 
    float: left; 
    margin: 20px; 
} 

Here is a working fiddle. Надеюсь, поможет!

Answer 2

Как раз так, что код там, в случае его полезности, вы можете получить то же поведение, что и ответ Ф. Versehgi без абсолютного позиционирования. Это использует flexbox (поэтому требуется IE11, но любой другой браузер должен быть в порядке) и некоторые медиа-запросы (для учета загрузочного контейнера Bootstrap).

Примечание: Вы хотите, чтобы просмотреть ссылку JSFiddle или CodePen ниже, потому что стек Сниппет не работает должным образом, по какой-то причине:

• JSFiddle например
• CodePen например

$(document).ready(function() { 
 
    function fillGrid() { 
 
     var $gridContainer = $('.grid-container'); 
 
     var htmlGridItem = $('#tmpl_grid_item').html(); 
 
     $gridContainer.empty(); 
 
     for (var i = 0; i < 20; i++) { 
 
      var $gridItem = $(htmlGridItem); 
 
      $gridContainer.append($gridItem); 
 
     } 
 
    }; 
 
    fillGrid(); 
 
});

.container { 
 
    background-color: #2B3643; 
 
} 
 
.container * { 
 
    box-sizing: content-box; 
 
} 
 
.grid-container { 
 
    padding-top: 30px; 
 
    padding-bottom: 0px; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    margin: 0px auto; 
 
} 
 
.grid-item-wrapper { 
 
    width: 200px; 
 
    margin-bottom: 15px; 
 
} 
 
.grid-item { 
 
    margin-bottom: 15px; 
 
} 
 

 
.grid-item > .item-desc { 
 
    padding: 8px; 
 
    background-color: #333333; 
 
    color: #CFCFCF; 
 
} 
 

 
body { 
 
    padding-top: 60px; 
 
} 
 

 
@media (min-width: 762px) and (max-width: 991px) { 
 
    .grid-item-wrapper:nth-child(3n+1) { 
 
     margin-left: 15px; 
 
    } 
 
} 
 
@media (min-width: 992px) { 
 
    .grid-item-wrapper:nth-child(4n+1) { 
 
     margin-left: 9px; 
 
    }  
 
} 
 
@media (min-width: 1200px) { 
 
    .grid-item-wrapper:nth-child(4n+1) { 
 
     margin-left: 109px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="grid-container row"> 
 
     <!-- grid items --> 
 
    </div> 
 
</div> 
 
<template id="tmpl_grid_item"> 
 
    <div class="grid-item-wrapper col-xs-3"> 
 
     <div class="grid-item"> 
 
      <div class="item-picture"> 
 
       <img src="http://lorempixel.com/350/200/food/" style="width: 100%;" /> 
 
      </div> 
 
      <div class="item-desc"> 
 
       Lorem Ipsum 
 
      </div> 
 
     </div> 
 
    </div> 
 
</template>