Full width DIV followed by two columns BY CSS ONLY-CodePudding

What I am trying to do is a challenge. I have an HTML like this:

<div class"list">
  <div >HEAD</div>
  <div >ITEM #1</div>
  <div >ITEM #2</div>
  <div >ITEM #3</div>
  <div >ITEM #4</div>
</div>

I cannot change the HTML code. I have to render it as:

|        HEAD       |
| ITEM #1 | ITEM #3 |
| ITEM #2 | ITEM #4 |

So I can use CSS only. I can use FLEX, anyway. I tried:

.list {
  flex-direction: column;
  flex-wrap: wrap;
}
.list .item {
  width: 50%;
}
.list .item.head {
  width: 100%;
}

I get the head as expected, but I do not know how to tell to break and wrap after item #2. Remember that I cannot change HTML.

Any idea?

CodePudding user response：

I took to code pen but couldnt get your CSS to work i did get this to work...

<div class"list">
 <div >HEAD</div>
 <div >ITEM #1</div>
 <div >ITEM #2</div>
 <div >ITEM #3</div>
 <div >ITEM #4</div>
</div>

 .list {
 justify-content: center;
 width: 100%;
 margin: 0 auto;
 }
.item {
 width: 50%;
 margin: 0 auto;
 flex-direction: column;
 text-align: center;
 float: left;
}
.itemB {
width: 50%;
margin: 0 auto;
flex-direction: column;
text-align: center;
float: right;
}
.head {
text-align: center;
}

CodePudding user response：

Use CSS grid for this:

.list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  text-align:center;
}

.list .item:nth-child(3) {
  grid-column: 1;
}

.list .item.head {
  grid-column: 1/-1
}

<div >
  <div >HEAD</div>
  <div >ITEM #1</div>
  <div >ITEM #2</div>
  <div >ITEM #3</div>
  <div >ITEM #4</div>
</div>