Eliminating the gaps between a vertical, asymmetrical, and intertwining stack of cards

I'm currently working on adjusting the layout of 12 vertical stacks of cards to remove excess empty space between them. The cards are already stacking nicely by rank, but there seems to be unwanted horizontal space between each pile, and I can't figure out why CSS Grid is causing this issue.

I attempted to add some extra CSS rules to further control the arrangement of the piles, but unfortunately, it only made the situation worse:

div.three { grid-column-start: three;  grid-column-end: four;}
div.four { grid-column-start: four;  grid-column-end: five;}
...

You can view the current setup on https://jsfiddle.net/lenbo41/nvu5jyzt/4/

The goal is to have the 4-pile positioned to the right of the 3-pile, the 5-pile to the right of the 4-pile, and so on, without large gaps in between the piles.

Please see the modified CSS code below for reference:

...
htmlcssalignmentcss-grid

Answer №1

Placing comments within an answer - utilizing relative positioning to adjust the placement of grid cells, resulting in stacked cards and creating a challenging final layout prediction. You can experiment with:

  • applying existing column positioning rules for div.three, div.four,..., div.ace,

  • assigning each div.card1, div.card2,..., div.card7 element to rows 1,2,...,7 respectively,

  • utilizing grid-auto-rows: 40px instead of grid-template-rows and setting the height of 150px for cards on #p1-grid > div to achieve the desired effect.

View demo below:

#p1-grid {
  display: grid;
  grid-template-columns: [three] 100px [four] 100px [five] 100px [six] 100px [seven] 100px [eight] 100px [nine] 100px [ten] 100px [jack] 100px [queen] 100px [king] 100px [ace] 100px [ace-end];
  grid-auto-rows: 40px; /* default card row height */
  grid-column-gap: 10px; /* a column gap */
  background-color: beige;
  color: black;
  font-size: 20px;
  padding: 20px;
  max-height: 510px;
  max-width: 1920px;
}

#p1-grid > div {
  height: 150px; /* specify height of each card here */
}

/* row placement on each card */

div.card1 {
  position: relative;
  z-index: 11;
  background-color: red;
  opacity: 0.80;
  grid-row: 1; /* place in row 1 */
}

div.card2 {
  position: relative;
  z-index: 12;
  background-color: orange;
  opacity: 0.80;
  grid-row: 2;  /* place in row 2 */
}

...
(Truncated for brevity)
...

div.king { grid-column-start: king; }
div.ace { grid-column-start: ace; }
<div id="p1-grid">
  <div class="three card1">3H</div>
  <div class="three card2">3D</div>
  <div class="three card3">3C</div>
  ...
  (Truncated for brevity)
  ...
  <div class="ace card5">AH</div>
  <div class="ace card6">AS</div>
  <div class="ace card7">AC</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing a flexbox container within a table container, implementing PRE tags for handling overflow

Currently, I am diligently working on an intricate DASHBOARD utilizing bootstrap-4. A peculiar issue arose with the implementation of <pre> within a Flexbox. However, upon closer inspection, it became evident that this was not a flexbox or <pre> ...

cssflexboxtwitter-bootstrap-4

Issue with HTML and CSS Grid alignment coupled with CSS syntax error on RBRACE

I'm in the process of updating my website indexes and decided to incorporate grids. However, when attempting to implement grids using Dreamweaver, I encountered several issues. Firstly, an error message appeared stating "Expected RBRACE at line 72, co ...

htmlcss

Tips for choosing a specific item from a list box with Jquery

How can I automatically select a list box item when a user selects a table row? https://i.sstatic.net/rKRLo.png The problem arises when a user wants to modify records in the table. After clicking on a particular row, the value should transfer to FilterVal ...

javascriptjqueryhtmlasp.net

Delete the HTML line break

I need some help figuring out how to eliminate the line break in HTML. Essentially, I want to display two "Hello World" lines next to each other instead of stacked on top of each other. <p>Hello World</p> <p>Hello World</p> ...

html

Images failing to load properly

Hi there, I'm new to programming and I'm in the process of creating a website. However, when I open my HTML file directly, the images are not displayed. Strangely, when I use VS Code or Brackets editor's live server, all the photos and pictu ...

htmlcssnew-operator

Beautifully collapsing inline-blocks using only CSS

My header features three inline-blocks within a container that is text-aligned center. The left block floats to the left, and the right block floats to the right, creating a visually appealing effect where the middle block's text remains centered on s ...

css

Secure HTML / CSS for JavaScript? I am unable to modify certain attributes during runtime

Due to ongoing discussions about blog colors for business purposes, we are looking to provide users with a "tool" (for those who are tech-savvy) to experiment with colors themselves. Our blog is a basic Wordpress site with various plugins (such as Google ...

javascripthtmlcss

Divide HTML content while keeping inner tags intact

Currently, I am developing an online store. In my code, there is a requirement to display attributes and descriptions for multiple products on a single page. The attributes are displayed in a table format, while the description can include simple text as w ...

phphtmlsplithtml-encode

Intercepting 401 with Angular 5 HTTP Interceptor recognizes it as status code 0

One issue I am currently facing is the inability to intercept a 401 status and redirect to the login page, which is a common practice in most applications. My interceptor code seems pretty standard: intercept(request: HttpRequest<any&g ...

htmlcssangularhttp

Tips for targeting a specific set of elements in codeBehind within Web Forms without creating an additional wrapper element

In my Webform page, I have a html form containing fields for customer data and product data, as well as other miscellaneous fields. I am facing the challenge of needing to hide either the group of product fields or customer fields during PageLoad or other ...

htmlcss.netbootstrap-4webforms

What is the significance of the border classes having an overriding color property in Bootstrap?

When adding a border to my navigation menu, I initially thought using the Bootstrap .border class would be the best approach. However, upon examining the code generated by this class, I noticed that it uses an !important declaration on the color property ...

htmlcsstwitter-bootstrapbootstrap-4

Utilizing numerous script elements for three.js library

Today, I ventured into the world of three.js for the first time, along with exploring html and js in general. While experimenting with some example code, I encountered an issue. It seems that importing the three.js file from the script tag in my Main.js ...

javascripthtmlnode.jsthree.js

The hidden visibility feature only activates when the mouse is in motion

visibility: hidden doesn't take effect until the mouse is moved. const link = document.getElementById("link"); link.onclick = (event) => { link.style.visibility = "hidden"; link.style.pointerEvents = "none"; event ...

htmlcss

Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

https://i.sstatic.net/DMU5s.jpg The elements E1, E2, E3, E4 are all part of the user interface (UI) and are intended to have a hover effect. Additionally, there is a background image included in the design. Currently, this is the progress made on the pro ...

htmlcss

Transform a <td> into a table-row (<tr>) nested within a parent <tr> inside an umbrella structure

Similar questions have been asked in the past, but I still haven't found a solution to my specific inquiry. Here it is: I have a table that needs to be sortable using a JavaScript plugin like ListJS. The key requirement is that I must have only one & ...

javascripthtmlcsshtml-table

Add JavaScript and CSS files from the node_modules folder to enhance a static HTML webpage

Currently, my development server is set up using node's live-server. However, for production, I plan to use a LAMP server. Within my node_modules directory, I have the normalize.css file. In my index.html, I currently link to it like this: <link ...

cssnode.jsnpm

Tips on resizing the infoWindow in Google Map

I am having trouble with my infoWindow on Google Maps displaying the correct information. I need to adjust the size of the white div to match the grey box inside and also resize the arrow that connects the marker to the white div. Check out the image belo ...

javascriptcssgoogle-mapsgoogle-maps-markersinfowindow

CSS: Various elements share a common transition effect, yet they do not fade in or out in a uniform manner

In the process of creating a dropdown menu that transitions with a fade in and fade out effect upon hover, I noticed an interesting anomaly. While all elements share the same transition behavior, there is a noticeable difference in appearance when hovering ...

htmlcssdrop-down-menutransitionfade

Unexpected line break in screen element without explanation

I am currently developing a mobile web application. On the top of the page, I have designed a single line which includes a "Back" link on the left side and the page name on the right. However, instead of displaying the elements as intended, the back link ...

htmlcss

Using R for web scraping, I encountered a unique situation where the 'next page' button was only programmed to navigate to the top of the page

I am attempting to extract the headline snippets from a local newspaper's articles by utilizing rvest and RSelenium. To access pages beyond the initial one, I need to click on the 'next page' button. Strangely, when I perform this action thr ...

jqueryhtmlrweb-scrapingclick