Html Question posted in
Some basic documentation can be found here.

Html – How can I insert a box between 2 rows? I don't want that box starts at the beginning of a row, I want that start and finish in the middle of a row

Obviously is something more complicated but i’d like a clear and simple description

enter image description here

I tried with grid and flexbox layout, setted "align-self: center" to the right box, but nothing happens, asked to ChatGPT and Perplexity too but I’m stuck.

I just want to display the third box (in a possible flex or grid layout of 3 box) in the right, centered in the middle of first and second left box.

This is the example code:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 1.5rem;
}

.box {
  background-color: #fff;
  border: 2px solid #000;
}

.box1,
.box2 {
  flex: 1 1 calc(60% - 1.5rem);
  height: 250px;
}

.box3 {
  flex: 1 1 calc(40% - 1.5rem);
  height: 250px;
  align-self: center;
}
<div class="container">
   <div class="box box1"></div>
   <div class="box box2"></div>
   <div class="box box3"></div>
</div>
Tags:

3

Answers


  1. 0

    CSS-Grid with five rows would be ideal. Each box spans two rows.

    .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 1.5rem;
}

.box {
  background-color: #fff;
  border: 2px solid #000;
}

.box1,
.box2 {
  grid-column: 1;
  height: 100px;
}

.box1 {
  grid-row: 1 /span 2;
}

.box2 {
  grid-row: 3 /span 2;
}

.box3 {
  grid-column: 2;
  height: 100px;
  grid-row: 2 / span 2;
}
    <div class="container">
  <div class="box box1"></div>
  <div class="box box2"></div>
  <div class="box box3"></div>
</div>
    Login or Signup to reply.
  2. 0

    Maybe you can do it with CSS grid, and adjust the max-width or the columns:

    .container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
}

.box {
  background-color: #fff;
  border: 2px solid #000;
  height: 250px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.box2 {
  grid-column-start: 1;
  grid-column-end: 4;
}

.box3 {
  grid-column-start: 4;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 3;
  align-self: center;
}
    <div class="container">
   <div class="box box1"></div>
   <div class="box box2"></div>
   <div class="box box3"></div>
</div>

    in grid-template-columns, you can adjust the number for less or more size in the boxes, or you can do it with max-width too. I use grid-column-start and grid-column-end for better understanding of whats happening.

    Login or Signup to reply.
  3. 0

    I hope that might help, it’s my first time commenting in here. I think it was more practical to add the two layouts in the HTML, and I erased the box1, box2, box3 class since everything is applied to the layout:

    • the first layout is a column with everything centered and two elements.
    • in the second one there’s only one centered element.

    You can just give diferent widths or flex to the layout1 and 2 or to the boxes inside if you wanna see a different size 🙂

    Hope that helps!

    ps. in your case, trying to align with align-self won’t work since there’s only one row, and you can’t make it go through those limits without using margins, which is definitely not recommended.

    .container {
  display: flex;
  width: 100%;
  gap: 1.5rem;
}

.layout1,.layout2{
  display:flex;
  flex: 1 1 50%;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
}

.box {
width:100%;
height: 100px;
border: 2px solid black;
}
    <div class="container">
   <div class="layout1">
      <div class="box"></div>
      <div class="box"></div>
   </div>
      <div class="layout2">
      <div class="box"></div>
   </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search