是否可以仅使用CSS集中网格？

Question

考虑包含固定大小项目（不是我选择）的网格，并且不是固定大小。

我想集中容器（.grid-container）以获得相同的边距，无论它有多少项以及它们如何放置在容器内，只要它们是左对齐的。

如果只能用CSS执行此操作，我该如何使用JavaScript？

没有必要像演示代码那样使用 twitter-bootstrap 网格系统。

Here代码说明：https://embed.plnkr.co/F6niiwaosnO8tr0ss4XF/

＆＃13;

＆＃13;

.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;
} 

  

    

＆＃13;

  <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>

＆＃13;

＆＃13;

＆＃13;

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

只是为了使代码在那里有用，你可以得到与F. Versehgi的答案相同的行为而没有绝对定位。这使用flexbox（因此需要IE11，但任何其他浏览器应该没问题）和一些媒体查询（以考虑Bootstrap响应容器）。

注意：您想要查看下面的JSFiddle或CodePen链接，因为Stack Snippet因某些原因无法正常工作：

• JSFiddle示例
• CodePen示例

＆＃13;

＆＃13;

$(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();
});

＆＃13;

.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;
    }  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;