Html - Flexbox items in three columns

FayeD
September 15, 2024
209 views
0 votes
2 Answers

I have a flexbox container that will contain 5 or 6 items. flex-direction of the container will be set to row. What I want is to distribute those items like this: The first item should be the first column, the second item should be the second column, and the rest 2 or 3 items should altogether be the third column, much like a grid configuration.

Unfortunately I can’t alter the HTML markup to add additional containers that will help me. It has to be done purely in CSS (if it can be achieved).

I played around a bit in a Flex generator, and this is the closest I went (which isn’t even close)…

  .flex-container {

    display: flex;
    
    justify-content: flex-end;  
    /* flex-flow: row wrap; */ 
    flex-direction: row; 
    flex-wrap: wrap; 

    background-color: #bbdefb;
    height: 100%;
    padding: 15px;
    gap: 5px;

  }

  .flex-container > div{
    background: #ffecb3;
    border: 3px solid #ffcc80;
    border-radius: 5px;
    padding: 8px;
  }


  .item1 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:auto;
  }
            
  .item2 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:auto;
  }
            
  .item3 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:flex-start;
  }
            
  .item4 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:flex-start;
  }
            
  .item5 { 
    /* flex:0 1 32%; */
    flex-basis:32%;
    align-self:flex-start;
  }

<div class="flex-container">
    <div class="item1">item 1</div>
    <div class="item2">item 2</div>
    <div class="item3">item 3</div>
    <div class="item4">item 4</div>
    <div class="item5">item 5</div>
</div>

Can someone please help me figure this out?

Answers

You could use CSS grid and place all children after the first two in the third column.

.item {
  background: #ffecb3;
  border: 3px solid #ffcc80;
  border-radius: 5px;
  padding: 8px;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  background-color: #bbdefb;
  padding: 15px;
}

.container > .item:nth-child(n + 3) {
  grid-column: 3;
}

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>

CSS-Grid with grid-auto-flow: column seems to do the trick

.item {
  background: #ffecb3;
  border: 3px solid #ffcc80;
  border-radius: 5px;
  padding: 8px;
  align-self: start;
  
}

.container {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: column;
  gap: 5px;
  background-color: #bbdefb;
  padding: 15px;
}

.item:nth-child(2) {
  grid-column: 2;
  height:40px;
}

.container > .item:nth-child(n + 3) {
  grid-column: 3;
  height: 60px;
}

<div class="container">
  <div class="item">
    Item 1
  </div>
  <div class="item">
    Item 2
  </div>
  <div class="item">
    Item 3
  </div>
  <div class="item">
    Item 4
  </div>
  <div class="item">
    Item 5
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Flexbox items in three columns

Answers