Varying number of div layout - css

Question

I'm trying to generate a layout which has varying number of divs, I.e.
| Large | Large |
|Small | Small | Small |
| Large | Large |
...
Large divs will have 50% width, whereas smaller one's will have 33%.
How can I go about this? I'm floating the div's so that they're in a row, but unsure on how I can get three smaller divs, below the larger ones, whilst still ensuring everything is central?
Current approach:
.case-card--large {
width: 50%;
float: right;
}
.case-card {
float: right;
text-align: center;
padding: 40px;
width: 33%;
border: 1px solid blue;
}
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>

Answer 1

Here is my solution.
I have used display:inline-block for each box
* {
box-sizing: border-box;
}
.container {
font-size: 0; /* to remove space betwen inline elements*/
}
.wrapper {
font-size: initial;
}
.case-card {
text-align: center;
padding: 40px;
width: calc(100% / 3);
border: 1px solid blue;
display: inline-block;
}
.case-card--large {
width: 50%;
}
<div class="container">
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text Large</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
</div>

Answer 2

You can work with a CSS technique: flex (MDN docs).
Put those elements in a parent container, set its width and make it behave as a flex-box by using display: flex. Here below is an example of how I did it. The CSS rules below the /* show case rules below */ are used to have a visual result of what you can have by using flex boxes.
#cont {
display: flex;
flex-direction: row;
width: 600px;
flex-wrap: wrap;
justify-content: space-between;
}
.case-card {
width: 33%;
box-sizing: border-box;
/* show case rules below */
background-color: red;
border: 1px solid black;
}
.case-card--large {
width: 50%;
/* show case rules below */
background-color: yellow;
}
<div id="cont">
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
</div>
edit: I have used justify-content: space-around; first which aligns the elements with width: 33% somewhat nicely in the middle towards each other. Changing that to justify-content: space-between; ensures that the outer boxes are aligned to the same border as the container which may appeal the OP more. Credits for D.Schaller

Answer 3

You need to include box-sizing:border-box because you are using padding or to put width as width: calc(33% - 80px), also .large class create as subclass or otherwise in your case put !important, because now doesn't work and everything is width 33%
body{
text-align:center;
}
.case-card {
box-sizing: border-box;
display:inline-block;
text-align: center;
padding: 40px;
width: 33.33%;
border: 1px solid blue;
margin: 0 -2px;
}
.case-card.large{
width: 50%;
}
<div class="case-card large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>

Answer 4

Ok.. So I made little modification in the code and it works quite fine. Hope it helps you out.
Instead of float:right I used
float:left
and added the border to the wrapper class.
https://codepen.io/anon/pen/oMWMBE
.case-card--large {
width: 50%;
float: left;
text-align: center;
}
.wrapper { border: 1px solid blue; }
.case-card {
float: left;
text-align: center;
width: 33.33%;
}
<div class="case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card--large">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>
<div class="case-card">
<div class="wrapper">
<p>Dummy text</p>
</div>
</div>