How do I split a 1170 pixels grid into 8 boxes? - css

Question

I need to split a 1170 grid into 8 boxes of X each with each box having the same amount of padding on the left and right. I can't seem to get it right :(
I managed to do 134 x 8 pixels and then a gutter of 14 each but that doesn't work because then the first and last box wouldn't have the same padding.

Answer 1

You could try calc
padding: 7px;
width: calc(12.5% - 14px);
More on Calc at W3Schools.com

Answer 2

If you are able to use flexbox, you can get even spacing in only a few lines instead of calculating by hand. The best resource I've found for flexbox is https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
width: 1170px;
display: flex;
justify-content: space-between;
}
.item {
border: 2px solid red;
width: 50px;
}
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

Answer 3

As commented, flex makes it easy.
+ selector will help to manage visually even padding
.flex {
display:flex;/* block level */
width:1170px;/* any values here or none */
height:100px;/* whatever: demo purpse*/
margin:auto;
background:lightgray;/* whatever: demo purpse*/
}
.flex div {
flex:1;/* sprays child evenly to fill whole space*/
padding:1em;
background:gray;
background-clip:content-box;/*show box minus padding area */
}
.flex div + div {/* make padding visually even */
padding-left:0;
}
div div {
display:flex;
align-items:center;
justify-content/* it's not text-align*/:center;
}
/* not just sure if that would be fine ? */
.flex:hover div {
padding:21px;
box-shadow:0 0 0 1px white
}
<div class=flex>
<div>average 128px each</div>
<div>width for content</div>
<div>is less or more</div>
<div>according to font-size</div>
<div>padding is 1em</div>
<div>but could be</div>
<div>static units</div>
<div>such as pixels</div>
</div
you do not want to use flex because you (unfortunate you) run IE8 ? display:table + table-layout:fixed will do the job for you
.flex {
display: table;
/* block level */
table-layout: fixed;
/* sprays child evenly if no width is specified*/
width: 1170px;
/* any values here or none */
height: 100px;
/* whatever: demo purpse*/
margin: auto;
background: lightgray;
/* whatever: demo purpse*/
}
.flex div {
display: table-cell;
padding: 1em;
background: gray;
background-clip: content-box;
/*show box minus padding area */
}
.flex div + div {
/* make padding visually even */
padding-left: 0;
}
div div {
vertical-align:middle;
text-align : center;
}
/* not just sure if that would be fine ? */
.flex:hover div {
padding: 21px;
box-shadow: 0 0 0 1px white
}
<div class=flex>
<div>average 128px each</div>
<div>width for content</div>
<div>is less or more</div>
<div>according to font-size</div>
<div>padding is 1em</div>
<div>but could be</div>
<div>static units</div>
<div>such as pixels</div>
</div

Answer 4

For some reason my jsFiddle here wouldn't work but I got eight columns working here: http://codepen.io/anon/pen/zoyEme
Make two half columns then put four columns in each of those for a total of eight.
Code:
.container,
.row,
.col-lg-6 {
padding-left: 0;
padding-right: 0;
}
div {border: 1px dotted red;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
</div>
<div class="col-lg-6">
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
<div class="col-lg-3">
ONE
</div>
</div>
</div>
</div>