How to create one vertical column in between rows in Flexbox [closed] - css

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
Is there is a way to create this style with Flexbox?

Answer 1

You have two ways to solve this. Either flexbox or CSS grid, both are good, but I prefer the CSS grid way:
Flexbox
.container {
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.column {
display: flex;
flex-direction: column;
height: 90%;
width: 30%;
}
.box {
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
height: 30%;
}
.box1 {
height: 30%;
}
.box2, .box5 {
height: 30%;
margin: 20px 0;
}
.middle {
height: 100%;
}
.column-large {
margin: 0 20px;
width: 30%;
height: 100%;
}
<div class="container">
<div class="column">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
<div class="column-large">
<div class="box middle">middle</div>
</div>
<div class="column">
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
</div>
</div>
CSS Grid
With CSS grid, this is what you can achieve. If you play around with the widths and heights, you could fit this to your needs. In case you want to know more about CSS grid in general, this article is a very good way to start: https://css-tricks.com/snippets/css/complete-guide-grid/.
.container {
width: 100%;
height: 100%;
display: grid;
grid-template-areas:
". middle ."
"tl middle tr"
"ml middle mr"
"bl middle br"
". middle .";
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 5% 30% 30% 30% 5%;
gap: 20px;
}
.box {
background-color: gray;
display: flex;
align-items: center;
justify-content: center;
}
.box1 {
grid-area: tl;
}
.box2 {
grid-area: tr;
}
.box3 {
grid-area: ml;
}
.box4 {
grid-area: mr;
}
.box5 {
grid-area: bl;
}
.box6 {
grid-area: br;
}
.middle {
grid-area: middle;
}
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box middle">middle</div>
</div>