I have a code like this:
<div class="article-container">
<div class="article">
<h3>title1</h3>
<p>article1</p>
</div>
<div class="article">
<h3>title2</h3>
<p>article2</p>
</div>
<div class="article">
<h3>title3</h3>
<p>article3</p>
</div>
<div class="article">
<h3>title4</h3>
<p>article4</p>
</div>
</div>
and I want to transform this 1 lined column into 2 columns like this:
I already tried to use this code, but is there any different way to split the div?
.article-container {
display: flex;
flex-wrap: wrap;
}
.article {
flex-grow: 1;
flex-basis: 50%;
}
.article:after {
content: "";
flex: auto;
}
<div class="article-container">
<div class="article">
<h3>title1</h3>
<p>article1</p>
</div>
<div class="article">
<h3>title2</h3>
<p>article2</p>
</div>
<div class="article">
<h3>title3</h3>
<p>article3</p>
</div>
<div class="article">
<h3>title4</h3>
<p>article4</p>
</div>
</div>
It's different from this other question Split Div Into 2 Columns Using CSS, the "article" arrangement from this question is different. Anyone got the idea?
You have two options. Use an extra column in the header, and use <colspan> in your header to stretch a cell for two or more columns. Insert a <table> with 2 columns inside the td you want extra columns in.
Nothing wrong with flexbox for this layout.
There's no need to use a pseudo-element.
.article-container {
display: flex;
flex-wrap: wrap;
}
.article {
flex: 0 0 50%;
padding: 10px;
}
* {
margin: 0;
box-sizing: border-box;
}
<div class="article-container">
<div class="article">
<h3>title1</h3>
<p>article1</p>
</div>
<div class="article">
<h3>title2</h3>
<p>article2</p>
</div>
<div class="article">
<h3>title3</h3>
<p>article3</p>
</div>
<div class="article">
<h3>title4</h3>
<p>article4</p>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With