Adjustable div with varying positions and dimensions

Question

Adjustable div with varying positions and dimensions

Hey there! I'm currently working on creating a page with a variable number of resizable divs. These divs can be resized horizontally using Bootstrap's col classes (col-2 through col-12), and vertically with no limits. Additionally, new divs can be added at any time.

I would like the next div to be placed after the previous one if space allows, otherwise it should move to the next row. The example below illustrates this concept, where div 2 is resized causing div 6 to shift to the right.

Is there a way to achieve this layout behavior purely with CSS? Thank you!

https://i.sstatic.net/FETSf.png https://i.sstatic.net/QEDE7.png

css bootstrap-4 grid resize position

Answer 1

Answer №1

To achieve the desired layout, you can utilize the grid feature in CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div class="row-span">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>

Answer 2

To achieve the desired layout, you can utilize the grid feature in CSS:

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 40px;
  gap: 2px;
  grid-auto-flow: row dense;
}

.container > div {
  border: solid 1px black;
}

.col-span {
  grid-column: auto / span 2;
}

.row-span {
  grid-row: auto / span 2;
}

<div class="container">
  <div class="col-span">1</div>
  <div class="row-span">2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div class="col-span">7</div>
</div>

Adjustable div with varying positions and dimensions

Answer №1

Similar questions

Prevent the Icon in Material UI from simultaneously changing

Unique styling for underlines in pop-up with custom CSS

Eliminate any trace of Bootstrap 4 design elements on the .card-header

Issue with Bootstrap 5 navbar dropdown: It opens easily but struggles to close

Bootstrap failing to enclose columns that do not have a specified size

Safari CSS issue: Relative parent and child with pseudo selector not producing consistent output across different browsers

Tips for ensuring an animation is triggered only after Angular has fully initialized

What is the best way to ensure columns are consistently aligned across various tables?

What is the best way to eliminate the pause in my slideshow?

If the navigation menu contains sub-menus, it should slide to the left

`<div>` element with a class of "button" that listens for

Truncating text with ellipsis in CSS when wrapping on a nested div structure

Centering text underneath bootstrap image design

Displaying a popup modal in Blazor client side

How can I prevent a horizontal scrollbar from appearing in HTML when using margin:-4px and what are some possible solutions to this

SVG embedded directly into CSS is compatible with Chrome and Edge browsers, but unfortunately does not render correctly in Firefox

The CSS slideshow is malfunctioning when displaying images retrieved from the database

Using ion-icon inside a clickable ion-card while applying float: right does not render properly

Determine the dynamic height of content in a TypeScript file

Integrate Bootstrap 4 with your Angular 6 or Angular 7 application