CSS subgrid doesn't show gap for row
I'm getting to know CSS' grid and subgrid. Working on a simple form with two columns and a few subgrids. the parent grid has a gap: 1em - both te column and the row have show a 1em gap properly.…
Html – Why does the picture extend beyond the block?
I specified max-height: 400px for the whole grid. But child elements are out of bounds, although they should be stretched by height relative to the size of the parent. demo <div class="grid"> <div class="grid__col"> <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt=""> </div> <div class="grid__col">…
Html – Basic CSS +grid: How do I keep one dynamic grid cell from blowing out my entire grid container?
I know this is a common question, but I haven't seen anyone answer it without switching away from grid or hardcoding pixel sizes (which seems like bad practice), so wanted to see if it's possible: I am trying to create…
Css – Why does `gap` add pixels to the end of a row in a grid container?
I know this sounds like the typical problem of using percentage values, but it's different. At least at first glance. Here's the situation: we have a grid with some elements: <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div>…
Css – Why is overflow scrollport padding not applied to a grid container when grid item with extrinsic height overflows?
Example HTML and CSS: .root { background-color: green; } .outer { display: grid; grid-template-rows: 100vh; grid-template-columns: 100px; padding: 5rem; overflow-y: auto; } .nav { background-color: red; height: 150vh; } * { box-sizing: border-box; } <div class="root"> <div class="outer"> <div class="nav"></div>…
Html – CSS Grid: Make grid row fill the screen, pushing next rows offscreen
Is there a way to do this through pure HTML/CSS? This is what I want to accomplish: |---------------------------| <-- start of screen | header | fixed height |---------------------------| | | | | | content | fill screen | | |…
Prevent CSS Grid rows from expanding as more items are added
I have a fairly simple CSS Grid with 12 columns. I am using the row-start and row-end features of CSS Grid to place my items exactly where I want them. But I have run into an issue where the more…
Html – Fit image with natural dimensions to parent container max-height constraint (without object-fit)
I have an image where the height should be constrained so the container height is a maximum of 400px. The image should maintain its natural aspect ratio. Critically, I cannot use object-fit because I want to provide the image a…
Html – CSS grid: two columns, unless smaller than 150px
I have a grid riddle, which seems to be simple, but I just have no idea and two AI chats failed as well. I have this: .cont { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } .box {background-color:…
Css – Multiple grid-child in same grid-area
I want to create a card which is pretty simple, and contains only an image, a paragraph and two buttons. The card I want to create: <div class="container"> <img src="" alt=""> <p></p> <button></button> <button></button> </div> .container{ padding: 2rem; grid-template-columns:[img-start] 120px…