I need to be able to make a grid that has 50% and 25% width divs which go in the pattern in this code below and then repeats after the initial grid pattern so it just keeps going down... This will be dynamically pulled in content so I have to put the divs width in with jquery.
edit:
I've gotten it to where I have it adding classes appropriately but I can't figure out the repeatable part of the pattern. So if there are more than the nine divs I want it to keep doing the pattern if that makes sense? I don't know if this is possible but I appreciate the help.
HTML
<div class="grid-cont">
<!-- Row 1 -->
<div class="grid-item">div 1</div>
<div class="grid-item">div 2</div>
<div class="grid-item">div 3</div>
<!-- Row 2 -->
<div class="grid-item">div 4</div>
<div class="grid-item">div 5</div>
<div class="grid-item">div 6</div>
<!-- Row 3 -->
<div class="grid-item">div 7</div>
<div class="grid-item">div 8</div>
<div class="grid-item">div 9</div>
<!-- This row should be the same as Row 1 -->
<div class="grid-item">div 1</div>
<div class="grid-item">div 2</div>
<div class="grid-item">div 3</div>
<!-- This row should be the same as 2 -->
<div class="grid-item">div 4</div>
<div class="grid-item">div 5</div>
<div class="grid-item">div 6</div>
<!-- This row should be the same as 3 -->
<div class="grid-item">div 7</div>
<div class="grid-item">div 8</div>
<div class="grid-item">div 9</div>
</div>
CSS
.grid-item{
box-sizing: border-box;
display:inline-block;
margin-left:-4px;
height: 50px;
border: 1px solid #ccc;
}
.one-column {
width: 25%;
background-color:gray;
}
.two-column{
width: 50%;
background-color:lightgray;
}
JQUERY
var grid = $('.grid-cont');
grid.find('.grid-item').each(function(index, element){
if ($.inArray(index, [1, 2, 3, 5, 6, 7]) >= 0){
$(this).addClass('one-column');
}
else{
$(this).addClass('two-column');
}
});
FIDDLE
https://jsfiddle.net/boolean12/u6w91x69/
Aucun commentaire:
Enregistrer un commentaire