Question 191534 in CSS Question posted in
Some basic documentation can be found here.

Css – How can I make an element be next to multiple other elements while sharing a parent container?

I have an unknown amount of elements and next to them they need to have an element always next to them like this:

╔═══════╦═══╗
║       ║   ║
╠═══════╣   ║
║       ║   ║
╠═══════╣   ║
║       ║   ║
╠═══════╣   ║
║       ║   ║
╚═══════╩═══╝

They can’t be two separate containers, my CSS is already quite complex and I’m working with other people as well so it would be quite difficult to change it everywhere.

I tried setting grid-row on the right element to 1 / -1, but you can only use negative values if you have explicity set grid-template-rows, but I don’t know how many columns there are.

Something else I tried was using a CSS counter to set either grid-row-end: counter(count) or setting grid-template-rows: repeat(counter(count), auto), but it doesn’t output a number.

What can I do? Should I just make it be two separate containers? Using JavaScript is not a great solution either.

Edit: a strange solution that isn’t very reliable, but should work in most situations assuming the rest of the layout is known, you can set grid-column: 1 / span 99. I tried doing 1 / 99 before but this is better and doesn’t create new rows.

Tags:

2

Answers


  1. 0

    Solution 1: With two containers

    You can achieve the same output using flexbox. You can split your container into two columns left and right, and the split your left container into four smaller containers. I added an example bellow with fixed dimensions just for referencing. Hope that helps.

    .container {
  max-width: 500px;
  width: 100%;
  height: 1000px;
  border: 1px solid black;
  display: flex;
  align-items: center;
  padding: 20px;
}

.left, .right {
  height: 100%;
  border: 1px solid red;
  padding: 10px;
}

.right {
    width: 30%;
}

.left {
  width: 70%;
  display: flex;
  flex-direction: column;
}

.row {
  width: 100%;
  height: 250px;
  margin: 5px 0;
}

.first-row {
  border: 1px solid blue;
}

.second-row {
  border: 1px solid green;
}

.third-row {
  border: 1px solid purple;
}
.fourth-row {
  border: 1px solid orange;
}
    <div class="container">
  <div class="left">
    <div class="row first-row"></div>
    <div class="row second-row"></div>
    <div class="row third-row"></div>
    <div class="row fourth-row"></div>
  </div>
  <div class="right"></div>
</div>

    Solution 2: With One container (Not recommended)

    You can achieve that also with one container but I do not recommend it because as you say you the boxes on the left will be dynamic. Here is any example but with fixed elements and fixed heights.

    I would suggestion switching to two separate containers since it is a more clear layout for what you want to achieve.

    .container { 
    max-width: 500px;
    width: 100%;
    height: 1200px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    flex-wrap: wrap;
}

.row {
    width: 70%;
    height: 240px;
    margin: 5px 0;
    float: left;
}

.fifth-row {
    margin: 5px;
    height: 100%;
    width: 30%;
    border: 1px solid red;
}

.first-row {
    border: 1px solid blue;
 }

.second-row {
    border: 1px solid green;
}

.third-row {
    border: 1px solid purple;
}

.fourth-row {
    border: 1px solid orange;
}
    <div class="container">
    <div class="row first-row"></div>
    <div class="row second-row"></div>
    <div class="row third-row"></div>
    <div class="row fourth-row"></div>
    <div class="fifth-row"></div>
</div>
    Login or Signup to reply.
  2. 0

    Sounds like you might want to try wrapping the items on the left. Have a look at this article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Mastering_wrapping_of_flex_items

    I do think it would be better to use two columns like was previously suggested, but if that’s not possible this could be the way.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search