Using grid with flexbox-CodePudding

  I will try to explain this the best I can, I'm new to flexbox. I added a flexbox that has a username, age, and distance. Once I was finished and wanted to add "location" under username i ran into a problem. I guess in order to achieve what I want I need to add grids. Can anyone help me with this? The code below is what I have, i added a pic of the grid I need.

CodePudding user response：

No need for flexbox. You either use flex or grid approach.

I don't really know what you're aiming for, but regarding the grid you attached, try this:

.info_wrapper {
  display: grid;
  gap: 10px;
  background-color: red;
  padding: 10px;
}
.item {
  background-color: rgba(255, 255, 255, 0.8);
}
.item1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.item2 {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.item3 {
  grid-column: 1 / span 2;
}

<div >
  <div >1</div>
  <div >2</div>
  <div >3</div>
</div>