css-grid

I'm working on a page with a pretty simple layout - basically a data table, but using grid layout so that the columns will adjust nicely depending on content size. I want to make the rows sortable (using jQuery), so I need to find a way to wrap all the cells of a same row in a container. display: subgrid; I've tried using subgrid but it seems it's not much supported at the moment.. Obviously, just nesting a grid doesn't work as it won't sync the column sizes between different grids.. Any idea on how to achieve that? Here is my pen so far: https://codepen.io/anon/pen/PEjqgx Depending on the

I'm fiddling around with a CSS grid-based frontend and the following behaviour is required over and over and over again in different parts of the frontend: A grid with a variable number of rows. Every row should have a variable size (auto will do). The last row should always take up all the remaining space. So in the case I happen to need five rows, this does the trick: .myGridForFiveRows { display: grid; grid-template-rows: auto auto auto auto 1fr; } However, I'd really like a stylesheet that yields the correct behaviour for any given number of rows. I thought maybe I could somehow use repeat

Is there an analog to flex-grow for the grid property ? I'd like my grid areas to accomodate the content they receive but have some areas take more place than others like flex-grow for flex . Practically, in the example below I'd like the turquoise to be invisible because it accomodates its content. The footer to be invisible as well because it has no content. The middle section take the remaining of the page like flex-grow . More practically, I'd like this code: .ctnr { display: grid; min-height: 100vh; grid-template-areas: "header header" "nav main" "footer footer"; } .test { background:

I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom. In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible? The green should push the blue area down as far as possible. https://jsfiddle.net/9nxpvs5m/ .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-areas: "one two" "one three" } .one { background: red; grid-area: one; padding: 50px 0; } .two { background: green; grid

I am creating a simple form, where I want to have this kind of layout So far so good, very simple 2 columns with a nested 2 columns, all of them defined with 0.5fr which should be the half of "free-space" if I understood correctly. But, if I try to reduce the screen, this happens. even if I have NO media queries. if you debug with chrome devtools you can see it's creating a 3rd column from nowhere without any element. Any idea? https://stackblitz.com/edit/js-zzm4gy?file=index.html h1, h2 { font-family: Lato; } .form{ border: 1px solid black; text-align: center; display: grid; grid-template

I've made a simple site with a #container div that is parent to two divs: #left and #right , by using Grid Layout : Is there any way to make the left column fixed? I'd like the left text to persist on its position, and the right text to be scrollable as it is now. Adding position: fixed to #left breaks the layout. I'm aware that this question has been already solved, but I'd appreciate a way to make it work with the grid layout. Thanks. body { margin: 0 0 0 0; } #container { display: grid; grid-template-columns: 50% 50%; } .section { padding: 5% 5% 5% 5%; } #left { background-color: aquamarine