I am trying to create a stack of cards that can be any number of cards.
When Im hovering they should fold out just a bit. This work but only to some degree. When the screen size is perfect everything looks nice, but then as seen in my example below the last cards starts to place them self away from the pile of cards.
This is most likely do to my lack of experince with grid.
Could someone please help me in the right direction, or maybe there is a better solution not using grid?
This do not apply anymore: Change the yellow-box width and side-scroll inside the green-box to see the affect on the card pile.
I have updated this post with a working solution basted on @Paul solution.
/*.wrapper-yellow {
min-width: 30px;
resize: horizontal;
overflow: auto;
max-width: fit-content;
padding:20px;
border: 2px solid yellow;
border-radius: 8px;
}*/
.wrapper-list {
/*
Old Solution commented out, new code based on Pauls anwser
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17px, 1fr));
grid-gap: 0%;*/
display: flex;
flex-direction: row;
margin-top: 8px;
margin-bottom: 8px;
padding:10px;
border: 2px solid green;
border-radius: 8px;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.wrapper-list:hover > div:not(:first-child) {
cursor: pointer;
/* grid-gap: 1%;*/
margin-left: -125px;
}
.wrapper-list::-webkit-scrollbar {
display: none;
}
.card {
position: relative;
height: 114px;
width: 164px;
flex-shrink: 0;
background-color: red;
border: 2px solid blue;
border-radius: 8px;
display: inline-block;
flex-shrink: 0;
transition: all 0.3s ease-in-out;
}
/*.wrapper-list div:nth-child(n) {
grid-row: 1 / 1;
}*/
.wrapper-list div:not(:first-child) {
margin-left: -150px;
}<!-- <div > -->
<div >
<div style="z-index:25"></div>
<div style="z-index:24"></div>
<div style="z-index:23"></div>
<div style="z-index:22"></div>
<div style="z-index:21"></div>
<div style="z-index:20"></div>
<div style="z-index:19"></div>
<div style="z-index:18"></div>
<div style="z-index:17"></div>
<div style="z-index:16"></div>
<div style="z-index:15"></div>
<div style="z-index:14"></div>
<div style="z-index:13"></div>
<div style="z-index:12"></div>
<div style="z-index:11"></div>
<div style="z-index:10"></div>
<div style="z-index:9"></div>
<div style="z-index:8"></div>
<div style="z-index:7"></div>
<div style="z-index:6"></div>
<div style="z-index:5"></div>
<div style="z-index:4"></div>
<div style="z-index:3"></div>
<div style="z-index:2"></div>
<div style="z-index:1"></div>
</div>
<!-- </div>-->CodePudding user response：
Well, I got something similar to work using this code...
<div >
<div >
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est eos quam modi cumque placeat earum veritatis saepe itaque. Inventore aliquid quaerat numquam quasi, velit corrupti quam ad dolorum amet consectetur!</div>
<div>Numquam pariatur laboriosam harum possimus dignissimos vero officiis officia, nisi excepturi mollitia magnam, quaerat maxime tenetur blanditiis sunt minus magni cupiditate consequatur unde reiciendis recusandae aspernatur esse deleniti ducimus! Nisi?</div>
<div>Nam voluptas dolorum, alias expedita ea beatae! Non doloremque in blanditiis animi voluptatum itaque unde laboriosam quos veritatis nobis, ex quam odio est quibusdam voluptas modi, sit vitae. Nam, maiores.</div>
<div>Dolorum, impedit nostrum doloremque dolorem ipsum saepe eos ut voluptates repudiandae vero omnis minima ex. Quasi temporibus excepturi praesentium in blanditiis ex laboriosam est odio suscipit ratione, necessitatibus esse enim.</div>
<div>Nobis adipisci autem distinctio vero voluptas soluta aspernatur sequi non, illo, architecto ab modi accusamus? Soluta voluptatibus pariatur provident ad ratione corrupti minus! Mollitia doloremque voluptates doloribus sit dignissimos quibusdam?</div>
<div>Placeat alias iste nobis, tempora sequi at dignissimos exercitationem facilis minus vel ducimus pariatur inventore? Consequuntur dolor, cumque, quis fugit nihil voluptates labore eligendi nobis enim, inventore fuga ducimus culpa.</div>
<div>Incidunt rerum fuga vel at officiis maiores distinctio, dolore ex iusto quidem dolorem aut id quod, facere laudantium vero, blanditiis minima nostrum exercitationem quisquam recusandae! Nihil aliquid esse quisquam nesciunt.</div>
<div>Mollitia labore, aut tenetur fuga ut deleniti excepturi maiores eum blanditiis explicabo, recusandae deserunt eius optio et voluptatum reiciendis sapiente repudiandae. Accusamus quibusdam, voluptas rem iste quis ab vitae. Reprehenderit.</div>
<div>Possimus eaque sed in enim omnis sapiente id autem, numquam, a ab neque dolores commodi, pariatur quos nihil suscipit! Quibusdam doloremque quo eaque deserunt incidunt suscipit accusantium magni vero laborum.</div>
<div>Hic nostrum distinctio aut iure! Aliquid minima explicabo est adipisci laudantium dignissimos consequatur deleniti doloremque ut, maxime minus tempora laborum corrupti, nostrum deserunt vitae voluptatem nam perspiciatis earum. Doloremque, sequi!</div>
</div>
</div>
...with this CSS...
* {font-family: arial; font-size: 18px;}
.desktop {background-color: #052; padding: 20px; text-align: center;}
.deck div {
border: 1px solid grey;
border-radius: 10px;
display: inline-block;
position: relative;
width: 150px;
height: 400px;
overflow: hidden;
background-color: white;
box-shadow: -10px 0px 20px #333;
padding: 10px;
margin-left: 20px;
}
.deck div :first-child {margin-left: 0; }
.deck div:hover {left: -40px;}
No repeated z-index or references to a card class.
It's a little messy, to be fair, but kind of achieves what you want. There's probably a hundred bettwer ways to achieve this, though, but I'm not really a CSS expert.
EDIT
Just to add to this, to reverse the appearance of the deck, simply change the numbers for the hover and margin-left, like so...
.deck div {
...
margin-left: -230px;
}
.deck div:hover {left: 30px;}
CodePudding user response：
I did some changes to your css, Please check if that is what you expect.
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17px, 1fr));
margin-top: 8px;
margin-bottom: 8px;
transition: all 0.5s ease-in-out;
grid-gap: 0px;
width:100%;
border: 2px solid green;
border-radius: 8px;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.wrapper:hover {
cursor: pointer;
grid-gap: 1%;
}
.wrapper::-webkit-scrollbar {
display: none;
}
.card {
position: relative;
height: 114px;
width: 164px;
flex-shrink: 0;
background-color: red;
border: 2px solid blue;
border-radius: 8px;
}
.wrapper div:nth-child(n) {
grid-row: 1 / 1;
}<div >
<div style="z-index:25"></div>
<div style="z-index:24"></div>
<div style="z-index:23"></div>
<div style="z-index:22"></div>
<div style="z-index:21"></div>
<div style="z-index:20"></div>
<div style="z-index:19"></div>
<div style="z-index:18"></div>
<div style="z-index:17"></div>
<div style="z-index:16"></div>
<div style="z-index:15"></div>
<div style="z-index:14"></div>
<div style="z-index:13"></div>
<div style="z-index:12"></div>
<div style="z-index:11"></div>
<div style="z-index:10"></div>
<div style="z-index:9"></div>
<div style="z-index:8"></div>
<div style="z-index:7"></div>
<div style="z-index:6"></div>
<div style="z-index:5"></div>
<div style="z-index:4"></div>
<div style="z-index:3"></div>
<div style="z-index:2"></div>
<div style="z-index:1"></div>
</div>