Ritu Singh
Question:
Making two-column grid overflow into the left column in Javascript
Problem:
Unsure if the title is descriptive enough, but what I currently have is this:
with HTML and CSS:
As you can see, I have fixed the height of the .test-left class, and would like all items in the right column that are below the fixed height of the left column to overflow into the left column. The height doesn't have to be fixed via the height property but is just how I've currently gotten it to the height I want. Eventually I want it to look like this:
Unfortunately I have hard coded a bunch of divs to be in those exact positions and would like it to do this dynamically so I can loop over an object of data via Jinja and place all the divs in that way. All the divs below the top left box will continue to grow left to right downwards.
I can imagine a solution where I loop over the first four elements in that data (if four exist, otherwise however many there are) and place them to the right of the big box, and then any elements after the first four I can loop over and are placed in a different grid below the big box, but perhaps there is a cleaner solution.
I'm okay with a solution including some JS.
Solution:
You can use grid to move things around a bit giving that first item span of 2 rows and two columns.
Added a second block with less in it to show it sizes the same;
Suggested blogs:
>Creating a service in Laravel using app(FQCN)
>How is the value of the path column under the wagtailcore_page table populated?
>Why VSCode indicate an error on using {{ }}?
>Fix the python-decouple issue in Django
>Address the N+1 problem in Django with prefetch
>How can I retrieve all customers' bookings by their username/ID?
>How to solve Static Files not being found in Django?
>How to format date-time input in Django?
>Remove certain characters without losing formatting
