Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

Question

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

To better understand my issue, I created a StackBlitz demo: https://stackblitz.com/edit/angular-aqmahw?file=src/app/tiles-example.css

Screenshot

My tiles can have four different widths (25%, 50%, 75%, 100%).

The tiles must fit on only two lines, so if all the tiles are 25% wide, there can be up to 8 of them.

I'm currently looking for an algorithm that can identify the empty spaces on these two lines and determine their sizes. This way, when adding a tile, I want it to fill in these empty spaces rather than just appending it to the end of the list.

Could anyone assist me with developing this algorithm?

javascript css angular algorithm

Answer 1

Answer №1

* {
  box-sizing: border-box;
}

.example-list {
  --columns: 4;
  --gap: calc(8 / 16 * 1rem);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: masonry;
  gap: var(--gap);
}

.example-box {
  background: rgba(0, 0, 0, 0.25);
  height: 200px;
  border-radius: var(--gap);
  padding: var(--gap);
}

.example-box span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.size-1 {
  grid-column: span 1 / auto;
}

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

.size-3 {
  grid-column: span 3 / auto;
}

.size-4 {
  grid-column: span 4 / auto;
}

<div _ngcontent-htr-c99="" class="example-list">
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-2"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-2"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-3"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-4"></div>
  <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
</div>

It is recommended to utilize grid for better control over 2D space instead of using flex for 1D space

I have reconstructed your example on this platform https://stackblitz.com/edit/angular-teylho?file=src/app/tiles-example.ts

Answer 2

* {
  box-sizing: border-box;
}

.example-list {
  --columns: 4;
  --gap: calc(8 / 16 * 1rem);
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: masonry;
  gap: var(--gap);
}

.example-box {
  background: rgba(0, 0, 0, 0.25);
  height: 200px;
  border-radius: var(--gap);
  padding: var(--gap);
}

.example-box span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.size-1 {
  grid-column: span 1 / auto;
}

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

.size-3 {
  grid-column: span 3 / auto;
}

.size-4 {
  grid-column: span 4 / auto;
}

<div _ngcontent-htr-c99="" class="example-list">
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-2"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-2"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-3"></div>
  <div _ngcontent-htr-c99="" class="example-box size-1"></div>
  <div _ngcontent-htr-c99="" class="example-box size-4"></div>
  <!--bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
</div>

It is recommended to utilize grid for better control over 2D space instead of using flex for 1D space

I have reconstructed your example on this platform https://stackblitz.com/edit/angular-teylho?file=src/app/tiles-example.ts

Answer 3

Answer №2

Alright, here's my solution: https://stackblitz.com/edit/angular-n6dqoj?file=src%2Fapp%2Ftiles-example.ts

In addition to your original tiles object, I have added variables that allow for dynamic changes:

Total size allowed per row (maximumSizePerRow),
Number of rows you desire (maximumNumberOfRows),
Beginning name of each row (rowPrefix) for display and logging purposes.

I also incorporated two arrays containing information about the rows' content, used for adding new tiles:

rowsData stores data on each row (name, available spaces, tile names),
tilesUsed includes only the tiles to be displayed based on desired number of rows. These replace the original tiles in the template.

The algorithm is straightforward: after setting up the structure of rowsData, the code loops through each row, then through each tile from the tiles object. If conditions are met - such as enough space in the row or tile not being used elsewhere - the tile is placed in the row. This ensures that only tiles fitting within the specified criteria are displayed.

The view will show only the tiles within the allocated rows, with a final console log providing details on remaining empty spaces per row.

Answer 4

Alright, here's my solution: https://stackblitz.com/edit/angular-n6dqoj?file=src%2Fapp%2Ftiles-example.ts

In addition to your original tiles object, I have added variables that allow for dynamic changes:

Total size allowed per row (maximumSizePerRow),
Number of rows you desire (maximumNumberOfRows),
Beginning name of each row (rowPrefix) for display and logging purposes.

I also incorporated two arrays containing information about the rows' content, used for adding new tiles:

rowsData stores data on each row (name, available spaces, tile names),
tilesUsed includes only the tiles to be displayed based on desired number of rows. These replace the original tiles in the template.

The algorithm is straightforward: after setting up the structure of rowsData, the code loops through each row, then through each tile from the tiles object. If conditions are met - such as enough space in the row or tile not being used elsewhere - the tile is placed in the row. This ensures that only tiles fitting within the specified criteria are displayed.

The view will show only the tiles within the allocated rows, with a final console log providing details on remaining empty spaces per row.

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

Answer №1

Answer №2

Similar questions

Bootstrap is unable to function properly without jQuery, throwing an error message that states: "Bootstrap's JavaScript

Experimenting with Cesium using Jasmine (Angular TypeScript)

What is the best way to ensure that less2css compiles all files after saving just one less file?

JS: Submitting form data through POST method but fetching it with GET method?

Extracting information from a JSON data within an API

Adding animation to a div that is being appended can be done by using JavaScript functions and

Searching for identical consecutive numbers in a grid

Issue with Electron: parent window not being recognized in dialog.showMessageBox() causing modal functionality to fail

What exactly is the purpose of measuring "First Load JS" in the @next/bundle-analyzer tool?

Executing ng test and ng serve at the same time

Creating an expandable discussion area (part II)

Bootstrap 5 NavBar Toggle hamburger Menu not displaying menu items

What is the process for requesting a css file?

How about this: "Looking to Share on Social Media with ME

What is the importance of accessing the session object prior to the saving and setting of a cookie by Express-Session?

Modifying the calendar from a 7-day week to a 5-day week

"Why does the React useState array start off empty when the app loads, but then gets filled when I make edits to the code

No control access origin header found on the request to Spring 5 WebFlux functional endpoints

Changing the dropdown value by clicking the previous and next buttons in Angular 2

How can I utilize Luxon to calculate the total number of days that are equal to or greater than 30?