What is the best way to position an element to be alongside multiple other elements within the same parent container?

Question

What is the best way to position an element to be alongside multiple other elements within the same parent container?

I have a bunch of elements with an unknown number, and I need them to always be accompanied by another element next to them in this pattern:

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

They must remain within the same container, as my CSS is already intricate and I am collaborating with others. Changing it all would be complex.

I attempted setting grid-row on the right element to 1 / -1, but negative values require grid-template-rows to be explicitly set, which is not feasible since the number of columns is unknown.

I also tried using a CSS counter to dynamically set either grid-row-end: counter(count) or

grid-template-rows: repeat(counter(count), auto)

, but it did not display a numerical output.

What is the best solution? Should I resort to having two separate containers? Using JavaScript is not ideal either.

Edit: A potential workaround, although not foolproof, involves setting grid-column: 1 / span 99. Initially, I tried 1 / 99, but the former is more effective and does not introduce additional rows.

css layout css-grid

Answer 1

Answer №1

Method 1: Utilizing two containers

To achieve the desired layout, you can employ the flexbox method. By dividing your container into two columns - left and right, then further segmenting the left column into four smaller containers. Below is a sample code snippet with fixed dimensions provided for reference purposes. I hope this explanation 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>

Method 2: Single container approach (Not recommended)

It is also possible to achieve the desired layout using a single container, but it is not advised due to the dynamic nature of the boxes on the left. Here is an example with fixed elements and heights included for illustrative purposes.

I recommend opting for the dual container setup as it offers a clearer layout for accomplishing your objective.

.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>

Answer 2

Method 1: Utilizing two containers

To achieve the desired layout, you can employ the flexbox method. By dividing your container into two columns - left and right, then further segmenting the left column into four smaller containers. Below is a sample code snippet with fixed dimensions provided for reference purposes. I hope this explanation 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>

Method 2: Single container approach (Not recommended)

It is also possible to achieve the desired layout using a single container, but it is not advised due to the dynamic nature of the boxes on the left. Here is an example with fixed elements and heights included for illustrative purposes.

I recommend opting for the dual container setup as it offers a clearer layout for accomplishing your objective.

.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>

What is the best way to position an element to be alongside multiple other elements within the same parent container?

Answer №1

Similar questions

The way images appear can vary between desktop and mobile devices

The Bootstrap card is elegantly framed by a crisp white border surrounding the

Adjust the dimensions of the HTML button to match that of its background

Tips for aligning text to the right and keeping it in line with another section

How can I adjust the height and width of a checkbox input specifically for mobile screens?

Ensure that the text remains in the forefront while applying a scaling effect to the image

How to perfectly align text vertically using Bootstrapstylesheet

Instructions for showing a "read more" and "read less" link when the text goes beyond a

Navbar-toggle divider shade

Angular 2's innovative approach to implementing a sticky footer concept

Is there a way to add a disappearing large space that vanishes when a line break occurs?

Which option is more effective: using an id or using !important?

Using Next.js in conjunction with Tailwind CSS and the shadcn/ui library to tackle the issue of preventing overscroll from creating

Creating text that adapts to various screen sizes when displayed over a video background

Find out if the visible area contains an open dropdown menu and take action if it is not

Creating a List Item with Equal Height as Its Parent Container

Creating a Jquery method to handle multi-line ellipsis for long text

Step-by-step guide on making a cascading dropdown menu using HTML

CSS: Targeting a particular instance of a specific element type within an HTML document

Bootstrap - A collapsed navigation button that remains fixed without the rest of the navbar