How can I align an element right below another one but with some spacing to the side?-CodePudding

How can I align an element right below another one but with some spacing to the side?

Element 4 in question

CodePudding user response：

While there are many potential solutions, including the more modern but less browser compatible CSS Grid Layout, I have chosen to implement this using Flexbox. First I create a simple layout, separating the numbered boxes, which I will call tiles, into two columns. I set those columns within a row wrapper. I then apply flexbox properties to the row and columns so that the columns and the tiles within them arrange themselves properly according to the viewport size. Many of the other properties may need to be adjusted for your particular implementation, but all you have given is a picture which is not enough to describe what you want. Next time when asking a question, please show code, address what you already attempted, and fully explain the parameters of what you're trying to do. Details like if the tiles are of fixed size or need to be able to shrink with the viewport are helpful. My solution is below, I will do my best to answer any questions you may have.

*,
:before,
:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 100%;
}

.row {
  border: 2px solid #000;
  margin: 16px 160px;
  padding: 1.5rem;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.col {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.col--left {
  margin: 0 24px 24px 0; 
}

.col--right {
  flex-wrap: wrap;
  width: 31.5rem; /* double tile width   gap width */
}

.tile {
  border: 2px solid #000;
  height: 6.25rem;
  width: 15rem;
  font-size: 1.75rem;
  text-align: center;
  line-height: 6.25rem;
}

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

You can view the above example on my CodePen.

CodePudding user response：

Use grid for that:

.container {
  padding: 10px;
  border: solid 1px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  align-content: flex-start;
}

.item {
  padding: 20px;
  border: solid 1px;
  text-align: center;
}

.item2 {
  grid-column: 3 / 4;
}

.item4 {
  grid-column: 3 / 4;
}

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