CSS Grid: Pushing a div to the first column and making it span 100% on hover

Question

I started developing a webpage using the CSS3 Grid and stumbled upon a problem I cannot seem to find a solution for.

Basically I have a container div which I populate as follows:

#pages {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30%,1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, auto));
    justify-items: stretch;
    grid-gap: var(--gridgap);
    grid-column: 1 / 1;
    grid-row: 2;
    color: black;
}

The HTML looks something like this:

<div id="pages">
        <article class="pagecard">
            <div class="cardheader">
                <h1> Page1 </h1>
            </div>

            <div class="carddesc">
            <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
            <h1> Page2 </h1>
            </div>
            <div class="carddesc">
            <p> Description test</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
            <h1> Page3 </h1>
            </div>
            <div class="carddesc">
            <p> Description test</p>
            </div>
        </article>

...

Usually this results in 3 Containers per row. What I want to do is make a container span the whole row when it is being hovered upon.

I tried doing it like this:

.pagecard:hover{
grid-column: 1 / -1;

}

This seems to work well for the item which is in column 1. When the mouse hovers over it it will span the whole row and all other items are correctly pushed to the next.

However when I try to hover over the element in row 1 column 2, instead of being positioned to column 1 and then stretched, pushing the item to the left away into the next row, the item itself jumps to the next row. Due to this effect it loses the hover and starts "jumping" back and forth.

Is this solvable using purely CSS and HTML?

Basically, when hovering over item #2 in a grid looking like:

1 2 3

4 5 6

It should result in

2 2 2

1 3 4

6

Hope anyone can point me into the right direction.

Thanks in advance!

EDIT:

I guess this would be solvable with javascript by calculating the cell's row and then setting grid-row: currentRow additionally to grid-column. However I am interested if there is a CSS only solution!

SamuelB · Accepted Answer · 2018-12-06T15:38:31.400

You have a design problem with css I am afraid. You said

Basically, when hovering over item #2 in a grid looking like:

1 2 3

4 5 6

It should result in

2 2 2

1 3 4

6

Now if your mouse moves and hovers over the 1 (in the second row), the 2 2 2 in the first row is replaced with 1 1 1 and the 1 in the second row is replaced with 2. You then get

1 1 1

2 3 4

This will cause flickering as your mouse is "hovering" over number 1 so are triggering hover on 1, then the switch happens and your mouse is now over 2, then hover on 1 etc etc etc.

See below.

#pages {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(30%,1fr));
    grid-template-rows: repeat(auto-fit, minmax(300px, auto));
    justify-items: stretch;
    grid-gap: var(--gridgap);
    grid-column: 1 / 1;
    grid-row: 2;
    color: black;
}

#pages>article{
    border: 1px solid black;
}

.pagecard:hover{
  grid-column: 1 / 4;
  grid-row: 1;
}

<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">

<link rel="stylesheet" type = "text/css" href="./stylesheets/style.css">
</head>

<body>
    <div id="pages">
        <article class="pagecard">
            <div class="cardheader">
                <h1> Page1 </h1>
            </div>

            <div class="carddesc">
                <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
                <h1> Page2 </h1>
            </div>
            <div class="carddesc">
                <p> Description test</p>
            </div>
        </article>

        <article class="pagecard">
            <div class="cardheader">
                <h1> Page3 </h1>
            </div>
            <div class="carddesc">
                <p> Description test</p>
            </div>
        </article>

                <article class="pagecard">
                    <div class="cardheader">
                        <h1> Page4 </h1>
                    </div>
                
                    <div class="carddesc">
                        <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has</p>
                    </div>
                </article>
                
                <article class="pagecard">
                    <div class="cardheader">
                        <h1> Page5 </h1>
                    </div>
                    <div class="carddesc">
                        <p> Description test</p>
                    </div>
                </article>
                
                <article class="pagecard">
                    <div class="cardheader">
                        <h1> Page6 </h1>
                    </div>
                    <div class="carddesc">
                        <p> Description test</p>
                    </div>
                </article>


    </div>
</body>

The best thing would be to add an on click so that a user can control what card he is looking at rather than a hover. It will also work on mobile devices as hover does not work there? — SamuelB, Dec 06 '18 at 15:37
What you described makes sense, but it is not what happens. When I hover over element 1 in row 1 I actually get 1 1 1 2 3 4 5 6 7 However, when I hover over element 2 in row 1 I seem to get 1 3 4 2 2 2 5 6 7 Therefore, 2 jumps into the row below, while the moues still hovers in row 1, which makes the element lose its hover and jump back up, getting hover again etc etc etc. Im not sure why element 1 is not replaced instead, but thats what I can observe. I think I will go with JS. Calculate the row of the item currently being hovered on and setting the grid-row to that value. — Assax91, Dec 06 '18 at 15:44
Have you tried my code snippet above? It performs as I said unless something is different? — SamuelB, Dec 06 '18 at 15:46
Your snippet works for items 1 to 3 but if you hover over 4 5 or 6 you get the flickering again, as the items move to top row while the mouse remains on the bottom. — Assax91, Dec 06 '18 at 15:54
I know :) That is the issue I was trying to explain to you. I am looking further into this so hopefully I can get you your desired effect. — SamuelB, Dec 06 '18 at 15:59
If you don't want to use Javascript, I suggest you look at the checkbox trick so that when a user clicks (not hovers) on a cell it will reorder the cells correctly but without the hover flickering. I am sure now that you can't get it with the hover selector. Check out the following Stack Overflow post and with some tweaking you could get your desired effect. Good luck! https://stackoverflow.com/questions/13630229/can-i-have-an-onclick-effect-in-css — SamuelB, Dec 06 '18 at 16:05
I came to the same conclusion as you! Hence I am going to do it with JS now. I was just interested if it is doable without :) Thank you! — Assax91, Dec 06 '18 at 16:09

CSS Grid: Pushing a div to the first column and making it span 100% on hover

1 Answers1