I want to build a grid system html and css. Actually, I developed small system but I have a error.

<div class="flexarea"> 
  <div class="flexitem">1</div>   
  <div class="flexitem">2</div>            
  <div class="flexitem">3</div>            
  <div class="flexitem">4</div>            
  <div class="flexitem">5</div>            
  <div class="flexitem">6</div>                           
</div>

I expect like that

• 1 2
• 3 4
• 5 6

But my result is like that

• 1 4
• 2 5
• 3 6

How can i fix this problem. My all css codes are below. I look forward your helps.

.bundleFlexArea {
   column-count: 2;
   column-fill: auto;
}
.bundleFlexItem{
    break-inside: avoid;
}

CodePudding user response：

Flexbox Solution

Using flexbox, here's how you would go about it.

HTML:

<div class="flexarea"> 
    <div class="flexitem">1</div>   
    <div class="flexitem">2</div>            
    <div class="flexitem">3</div>            
    <div class="flexitem">4</div>            
    <div class="flexitem">5</div>            
    <div class="flexitem">6</div>                           
</div>

CSS:

.flexarea{
   display: flex;
   flex-wrap: wrap;
}

.flexitem{
   flex: 1 0 50%;
}

Grid Solution

You could try using grid instead of flex, I tend to find this easier for this sort of thing.

Here is an example:

HTML:

<div class="wrapper">
    <div class="box 1">1</div>
    <div class="box 2">2</div>
    <div class="box 3">3</div>
    <div class="box 4">4</div>
    <div class="box 5">5</div>
    <div class="box 6">6</div>
</div>

CSS:

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.box {

}

CodePudding user response：

try this:

.flexarea{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flexitem {
    display: flex;
    flex: 1 0 50%;
}

<div class="flexarea"> 
  <div class="flexitem">1</div>   
  <div class="flexitem">2</div>            
  <div class="flexitem">3</div>            
  <div class="flexitem">4</div>            
  <div class="flexitem">5</div>            
  <div class="flexitem">6</div>                           
</div>

CodePudding user response：

Try this. Maybe it will work.

.flexarea{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

<div class="flexarea"> 
  <div class="flexitem">1</div>   
  <div class="flexitem">2</div>            
  <div class="flexitem">3</div>            
  <div class="flexitem">4</div>            
  <div class="flexitem">5</div>            
  <div class="flexitem">6</div>                           
</div>

CodePudding user response：

You could use flex property to easily get your desired layout with minimal css. Try the below code:

.flexitem {
  float: left;
  width: 50%;
}

<div class="flexarea"> 
  <div class="flexitem">1</div>   
  <div class="flexitem">2</div>            
  <div class="flexitem">3</div>            
  <div class="flexitem">4</div>            
  <div class="flexitem">5</div>            
  <div class="flexitem">6</div>                   
</div>

Please refer: https://www.w3schools.com/howto/howto_css_two_columns.asp