Using the calc function with fr units – CSS
I have a 3x3 css grid for which I want to have the respective two outer column and row sizes be calculated. The middle ones are 1fr. So far I have: (see also this codepen) html { --zoom-scale: 1; }…
Create a grid under a flex box – Html
I am currently creating a landing page for a website in which I used a flex display for one section. Below this section, I want to create a grid for another section, however the content is being display in between…
Failing to create a responsive grid area with an svg image – Html
In my attempt to create a responsive grid area with an svg image inside I have run into odd behaviour such as arbitrary grid area widths, and inability to have the image grow or shrink to a certain point than…
How to make a empty grid-template-row to fill up remaining space? – Html
How can I create a grid layout with 3 rows so that the rows fill the entire screen, even if the rows are empty? For example, header and footer have 100px and 50px. The middle grid row (main area) should…
HTML Grid of widgets over content without blocking
This is quite a tough case to explain, so I appreciate your patience. I want to have a grid of widgets, dynamically displayed and relatively positioned so I could place them dynamically where I want. These widgets will sit in…
Maintain the same height of nested div inside 3 column – Html
I have 3 columns these columns have same section e.g title, address and etc. not only i want the card to have the same height but also the nested section should have the same height e.g if in one section…
CSS stop children overflowing parent in grid scroll – Html
I have a root container that is 100% width and height. The root container is overflow-x:scroll. Inside the root container is another container which has n number of fixed width elements. The container is display:grid with grid-auto-flow:column The problem I…
How to take up all available vertical space within a grid? – CSS
I have a css grid in which I want the last row to take up all the available vertical space .r3 in the .main-content region of my snippet should occupy the remaining space. How can I do that? At the…
Responsive centering in dense grid layout with repeat auto-fit – Html
I have a responsive grid in which each item has its own details section, which is hidden by default. A click on the item adds a class to the details section to show it. The HTML/CSS looks roughly like this:…
css grid with implicit rows and aspect-ratio problem
I'm trying to achieve a css grid with various squares that scrolls sideways: https://codepen.io/flapusmog/pen/poOqrWa The problem is that the aspect-ratio of the squares outside the original width gets squashed, and loses their proportions. It's as if the width of the…