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

user_6495656 0
Viewed 98

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

Element 4 in question

flexbox css html
2 Answers

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 class="container">
  <div class="item">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

user_170071840

There are many potential solutions to this, including the more modern 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: 1rem 10rem;
  padding: 1.5rem;
  min-width: 51.5rem;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

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

.col--left {
  margin: 0 1.5rem 1.5rem 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 class="row">
  <div class="col col--left">
    <div class="tile">1</div>
  </div>
  <div class="col col--right">
    <div class="tile">2</div>
    <div class="tile">3</div>
    <div class="tile">4</div>
  </div>
</div>

You can view the above example on my CodePen.

user_68539170
Related