5

I have 7 items in a container. How can I make the first 3 be full width and the next 7 be 50% width?

I also need element that are in the same row visually to have the same height.

I can use flexbox for this if necessary. In this demo the container has a fixed width but in reality its a responsive layout so the width varies.

http://codepen.io/anon/pen/yJoPwK

.cont {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: blue;
}
.item-5 {
  background: grey;
}
.item-6 {
  background: orange;
}
.item-7 {
  background: gold;
}
.item-4,
.item-5,
.item-6,
.item-7 {
  width: 50%;
}
<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4 <br> wrap</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
</div>

This is the layout im trying to achieve:

enter image description here

0

2 Answers 2

6

You can set the container to flex-flow: row wrap;

Set the first 3 flex items to width: 100%; and last 4 items to width: 50%;

Updated Pen

.cont {
  display: flex;
  flex-flow: row wrap;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}

.item-1 { background: blue; }
.item-2 { background: green; }
.item-3 { background: yellow; }
.item-4 { background: blue; }
.item-5 { background: grey; }
.item-6 { background: orange; }
.item-7 { background: gold; }
.item-1, .item-2, .item-3 { width: 100%; }
.item-4, .item-5, .item-6, .item-7 { width: 50%; }
<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4 <br> wrap</div>
  <div class="item item-5">5</div>
  <div class="item item-6">6</div>
  <div class="item item-7">7</div>
</div>

1

In .item-4 and item-5 create two sub elements item-4-1, item-4-2,

then .item-4, .item-5{display: flex} will do the job

Demo

.cont {
  display: flex;
  flex-direction: column;
  border: 1px solid grey;
  width: 200px;
  margin: auto;
}
.item-1 {
  background: blue;
}
.item-2 {
  background: green;
}
.item-3 {
  background: yellow;
}
.item-4 {
  background: blue;
}
.item-5 {
  
}
.item-4, .item-5{
  display: flex
}
.item-4 .sub-item, .item-5 .sub-item{
  width: 50%;
}
.item-4 .item-4-2{
  background: grey;
}

.item-5-1 {
  background: orange;
}
.item-5-2 {
  background: gold;
}
<div class="cont">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">
    <div class="sub-item item-4-1">4 <br> wrap</div>
    <div class="sub-item item-4-2">5</div>
  </div>
  <div class="item item-5">
    <div class="sub-item item-5-1">6</div>
    <div class="sub-item item-5-2">7</div>
  </div>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.