I want to have a layout of sticky cards using grid layout. This is what I managed to achieve: <div class="cards"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> </div> :root { --card-top-offset: 3rem; --card-h: 36rem; } .cards…
I am using a grid to place cards. The grid is responsive using minimax and auto-fit: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); But, I would like to have a single card in the first row, such that the card does not span…
I have this code and I want to change the background colour of the fifth last row. I know I need to use nth-last-child. Someone can tell me the code? .grid-container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows:…
I am building a Navbar for my app. I would like to have my items shrink based on their content but grow based on the average size. All I want is: if there is enough space for all items to…
I've got to do a layout like this: As you can see, the hero image is 'offsetted', background being shorter of it. I managed to do it with nested css grids and a 'dummy' element to add background, but I…
body { background-color: hsl(210, 46%, 95%); font-size: 13px; font-family: "Barlow Semi Condensed", sans-serif; height: 100vh; } svg { position: absolute; justify-self: right; padding-right: 20px; } .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); }…
I'm learning CSS grid layout. Here is the result that I want: Holy Grail Correct Result Here is the result I'm getting: Incorrect Result html { width: 100%; /* 100% width of parent (root) element */ height: 100vh; /* 100%…
image of webpage I am a newbie and tried to fit the texts in the grid but it's either too small or not visible. I also tried to make a thin solid black border but the size of the border…
I'm struggling to think of a nice way to setup my grid items in an HTML page. I have a number of charts, each with a previous and current version. Sometimes they have different heights so I decided to have…
In chrome devtools responsive (375px) i have this: <div className="w-screen overflow-x-auto"> <div className="grid grid-cols-[repeat(7,_100px)] bg-blue-200"> <div className="sticky left-0 bg-green-200">col1</div> <div>col2</div> <div>col3</div> <div>col4</div> <div>col5</div> <div>col6</div> <div>col7</div> </div> </div> why is it that when i get to the 5:th column when scrolling…