What is the best way to make a grid "in a row either 1 block or 2"?

Question

css

Hey!
tell me how best to make a grid "in a row either 1 block or 2"?

now it's done like this: https://codepen.io/tvj/pen/wvdMWvK

the snag is rather indented for double blocks. did it like this:

.item-single {
  flex-basis: calc(50% - 2px - 5px); // -2px на бордер и -5px на половину маргина одного блока (левого)
}

.item-single:nth-child(odd) {
  margin-right: 10px;
}

but it seems to me that calculating flex-basis in this way is not entirely correct, and there is a more elegant way to indent. and the main working solution (now it’s just a margin on the right for every odd item-single, for some reason this doesn’t work in all cases)

, maybe there is a better solution?

Answer 1

Hello.
Try like this:

.outer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}

.item {
  background: red;
  height: 200px;
  width: 100%;
  margin-bottom: 20px;
  font-size: 30px;
  text-align: center;
  border: 1px solid black;
  box-sizing: borer-box;
}

.item-full {
  flex-basis: 100%;
}

.item-single {
  flex-basis: 49%;
}