css-grid

Is there a way to set a single grid-row-gap to specific size that is different from the rest of the grid? Use case: the top row of the grid should have less of a gap to the second row than the rest of the grid as it acts as a header. The grid-row-gap and grid-column-gap properties apply to the entire grid ( spec reference ). However, you can use negative margins on the second row grid items to adjust their position. Another option would be to remove the top row (headers) from the current grid and place it in a different container directly above the data. This would eliminate the grid-gap

I want separate scroll on each of my columns in my grid layout. Currently, I am developing a mobile only web application. I want to use a different grid layout for the portrait and landscape orientations. The portrait orientation is just 1 column and every element is after the other. No problem here. In the landscape orientation I want to use 2 columns. My whole content is displayed on the left side and my navigation moves to the right side. Now I want both parts to have a separate scroll. Is there a way to implement this? And the scroll should stop if the content of the current column ends.

This a table that created with CSS Grid Layout, but I have a problem with it, I can't make hover state on each row. I only want use CSS for this. Can anyone give me a solution for this? .table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; } .table>* { background: gray; padding: 10px; } .heading { background: navy; color: #fff; grid-row: header; } <div class="table"> <div class="heading">Title 1</div> <div class="heading">Title 2</div

I am using CSS grid to layout some items like this... #container { display: grid; grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%; } .item { background: teal; color: white; padding: 20px; margin: 10px; } <div id="container"> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div class="item">Item</div> <div

Is it possible to make CSS grid wrap without using media queries? In my case, I have a non-deterministic number of items that I want placed in a grid and I want that grid to wrap. Using flexbox, I'm unable to reliably space things nicely. I'd like to avoid a bunch of media queries too. Here's some sample code : .grid { display: grid; grid-gap: 10px; grid-auto-flow: column; grid-template-columns: 186px 186px 186px 186px; } .grid > * { background-color: green; height: 200px; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> And here's a gif: As a side-note, if