css-grid

So I have this basic setup - a canvas area and an animator in a parent grid. The parent grid is also inside another grid with one 1fr row. I can resize the animator by dragging a resizer up and down. canvas { background-color: blue; } #grid1 { grid-template-rows: 1fr; } #grid2 { background-color: black; display: grid; grid-template-rows: 1fr auto; overflow: hidden; } #canvas-area { grid-row: 1; background-color: red; } #animator { grid-row: 2; height: 200px; } <div id="grid1"> <div id="grid2"> <div id="canvas-area"> <canvas/> </div> <div id="animator"></div> </div> </div> I want the canvas to

I am looking for a way to automatically generate a grid, that always fills the available space, while shrinking the items until another item can be added. Most responsive grid implementations use something link this: grid-template-colums: repeat(auto-fill, minmax(120px, 1fr)); This works fine, except, that it uses the minimum value as the default image size, which results in interpolation of the images inside the grid. I want to do the opposite — set a max-width and shrink the images if necessary. Let’s say my grid items should have a max-width of 400px. Here are some of the values, that I

My question is identical to this question, but the given solution does not work. Here is a codepen of what I'm working with. I've tried two different approaches, both of which are almost correct but not quite: 1. Applying ::before and ::after psuedo classes to first and last grid items Unfortunately when I add margin-left and margin-right properties to the first and last grid item respectively, it adds the space to the grid items as if it were padding space and not margin space, otherwise this works fine. 2. Applying ::before and ::after psuedo classes to grid container It will not allow me to

The following works: Note how I'm even using content: attr(class) to avoid having to type out the labels. Neat! section { outline: 1px solid red; display: grid; grid-gap: 10px; grid-template-areas: "a1 a1 a1 a1" "a2 a2 a3 a3" "a2 a2 a4 a5" "a6 a6 a6 a6" "a7 a8 a9 a9" "a7 a0 a0 a0"; } .a1 { grid-area: a1; } .a2 { grid-area: a2; } .a3 { grid-area: a3; } .a4 { grid-area: a4; } .a5 { grid-area: a5; } .a6 { grid-area: a6; } .a7 { grid-area: a7; } .a8 { grid-area: a8; } .a9 { grid-area: a9; } .a0 { grid-area: a0; } div { display: flex; outline: 1px dotted green; } div:before { margin: auto; content:

I am using CSS grid layout to position various parts on a website. I use grid-column: x / x; and grid-row x / x; to set their position and size on the page. It's working really well. Now I am trying to animate a smooth transition between two grid-column fixes which happens when the screen size changes. The change is from grid-column: 3 / 9; to grid-column: 2 / 10; which means the div grows on either side by 1fr each. At the moment it just "pings" into place but I would like to have a smooth transition between the two. Anybody got any ideas how to tackle it? Here is the snippet from my CSS file

I'd like to have a grid like this: .grid{ display:grid; grid-gap:50%; background-color:blue; } .grid-1{ background-color:red; } <div class="grid"> <div class="grid-1"> test </div> <div class="grid-1"> test </div> <div class="grid-1"> test </div> </div> I think it's a really big problem by all browser to correctly understand percentage values How to resolve this? Markus Since we cannot resolve the percentage initially, the grid is first calculating the height considering content like this: console.log(document.querySelector('.grid').offsetHeight) .grid { display: grid; background-color: blue; }