I am creating a video grid which needs to be of 4 elements, attaching similar code with images instead of videos. The grid area has to take full width is not respecting the allotted space of 1fr, so each time…
this is a picture of the issue I am currently coding a website for a client. This is a portfolio website to showcase their photography and im running into an issue with my layout. I have one div as my…
Is there a smart and simple way to float elements from bottom left corner to top right corner? My solution with display:grid is too static and has fix cols and not more than 10 items. I`m searching for a smart…
I'm trying to use grid template to build a layout for different views (mobile / desktop etc). I'm using grid-template-area. For mobile it is easy since I'm using just 1 column but when I go to desktop I want to…
I have the following HTML: <ul> <li> <p>A</p> <p>B</p> <p>C</p <p>D</p> </li> <li> <p>AAA</p> <p>BBB</p> <p>CCC</p <p>DDD</p> </li> <li> <p>A</p> <p>B</p> <p>C</p <p>D</p> </li> <li> <p>AAAAAA</p> <p>BBBBBB</p> <p>CCCCCC</p <p>DDDDDD</p> </li> </ul> The actual number of lis is variable, but each…
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…