Varying number of div layout

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>

4 Answers
4

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.

display: flex

/* show case rules below */

#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

justify-content: space-around;

width: 33%

justify-content: space-between;

justify-content:space-between

Here is my solution.

I have used display:inline-block for each box

display:inline-block

* {
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>

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>

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:right

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>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.