Is it possible to centralize a grid using only CSS? - Twitter bootstrap

mrufca
January 27, 2016
267 views
0 votes
2 Answers

Considering a grid that contains fixed size items (not my choice), and is not fixed size.

I would like to centralize the container (.grid-container) to have same side margin no matter how many items it have and how they are placed inside container as long as they are left-aligned.

If it isn’t possible to do this only with CSS how can I do using JavaScript?

It’s not necessary to use twitter-bootstrap grid system like the demo code.

Here a code to illustrate: 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>

Answers

If you are willing to use absolute positioning and CSS3, there is a way.

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. Hope it helps!

Just so that the code is out there in case it’s useful, you can get the same behavior as F. Versehgi’s answer without absolute positioning. This uses flexbox (so requires IE11, but any other browser should be fine) and some media queries (to account for the Bootstrap responsive container).

Note: You’ll want to view the JSFiddle or CodePen link below, because the Stack Snippet is not working properly, for some reason:

JSFiddle example
CodePen example

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

Please signup or login to give your own answer.

Click here to cancel reply.

Is it possible to centralize a grid using only CSS? – Twitter bootstrap

Answers