Dynamic grid system with different widths css3? - html

Question

I need to perform a dynamic grid system like this:
Each section is an article that contains an image, a title and a link/button to that article.
The problem is that each section is loaded dynamically and i only have the html of the section so i need to put each section on the correct position dynamically from the CSS. The one i know is that there are 5 sections.
The html code of each section and the container of all the sections is this:
<section class="scroll">
<!-- ARTICLES -->
<!-- ARTICLE -->
<div class="article-content">
<img class="article-image" src="${item.imgPath}" />
<div class="article-texts">
<h1 class="article-title">${item.title}</h1>
<a class="article-button" href="${item.link}.html" role="button">Read Article ></a>
</div>
</div>
<div class="clear"></div>
<!-- END ARTICLE -->
<!-- END ARTICLES -->
</section>

Answer 1

If you have control over the dimensions of your sections, you can use a fixed width container and float the sections inside that. Clear the float on the fourth section.
Example Fiddle: http://jsfiddle.net/abhitalks/mbuf9957/3/
Example Snippet:
* { box-sizing: border-box; padding: 0; margin:0; }
div { width: 380px; overflow: hidden; }
section { border: 1px solid #666; float: left; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 120px; }
section:nth-child(3) { width: 120px; height: 120px; }
section:nth-child(4) { width: 120px; height: 120px; clear: left; }
section:nth-child(5) { width: 240px; height: 120px; }
<div>
<section>1</section>
<section>2</section>
<section>3</section>
<section>4</section>
<section>5</section>
</div>

Answer 2

Since you have tagged this as CSS3, I think Flexbox would be an option. You could set display:flex on the parent and then have percentage widths for each box's flex-basis and set the flex-grow property to the amount of space, relative to other boxes, you want them to take up in the container and set flex-shrink to 0 since you don't need them to shrink.
CSS/HTML:
.grid-system {
/* Uncomment the next line to see the container */
/* border:1px solid black; */
}
.grid-system .box-width-2 {
border:1px solid black;
-webkit-flex:2 0 65%;
flex: 2 0 65%;
}
.grid-system .box-width-1 {
border:1px solid black;
-webkit-flex:1 0 32%;
flex: 1 0 32%;
}
.grid-system .box-height-2 {
-webkit-flex-grow:2;
flex-grow:2;
}
.grid-system .box-height-1 {
-webkit-flex-grow:1;
flex-grow:1;
}
.grid-system .flex-row {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:row nowrap;
flex-flow:row nowrap;
-webkit-justify-content:flext-start;
justify-content:flex-start;
}
.grid-system .flex-column {
display:-webkit-flex;
display:flex;
-webkit-flex-flow:column nowrap;
flex-flow:column nowrap;
width:32%;
}
.grid-system .flex-row > div {
margin:0.5%
}
.grid-system .box-width-1.box-height-1 {
margin-bottom:0.5%;
-webkit-flex-grow:1;
flex-grow:1;
}
.grid-system .box-width-1.box-height-1.end {
margin-bottom:0px;
}
<div class="grid-system">
<div class="flex-row">
<div class="box-width-2 box-height-2">1</div>
<div class="flex-column">
<div class="box-width-1 box-height-1">2</div>
<div class="box-width-1 box-height-1 end">3</div>
</div>
</div>
<div class="flex-row">
<div class="box-width-1">4</div>
<div class="box-width-2">5</div>
</div>
</div>
jsFiddle

Answer 3

A solution only involving floats can reproduce your layout. Compatibility IE8+ (and even below but nobody cares). Pseudo-class :nth-child() (compat. IE9+) is used here to give an arbitrary width and height for demo, you'll have your own layout in real conditions.
* { box-sizing: border-box; }
div { width: 360px; }
section { border: 1px solid #666; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
section:nth-child(1) { width: 240px; height: 240px; }
section:nth-child(2) { width: 120px; height: 100px; }
section:nth-child(3) { width: 120px; height: 80px; }
section:nth-child(4) { width: 200px; height: 120px; }
section:nth-child(5) { width: 160px; height: 100px; }
<div>
<section class="left">1</section>
<section class="right">2</section>
<section class="right">3</section>
<section class="left clear">4</section>
<section class="right">5</section>
</div>