I'm using CSS grid's place-content: center to vertically and horizontally center a div in a fixed container, like so: .outer { position: fixed; inset: 0; background: black; display: grid; place-content: center; } .inner { padding: 30px; background: white; width: 100%;…
I got a CSS grid that looks like this, full-start | wide-start | content-start | content-end | wide-end | full-end What I want it to do: I'm trying to make it so the content area would always have it's max-width,…
I'm working on a project for a client using nextjs, and the design requires me to have a component with a custom border on a responsive CSS grid. I've made the CSS grid with all the content inside, however I'm…
Like the title says, when flex-wrap:wrap is enabled on a parent div, the child grid containers double in height. I'd like it to not do that, but more importantly, why is this happening? I assumed the height of the grid…
I have a CSS grid which is wider than the viewport. I want to be able to scroll right to reveal the rest of the grid but for some reason the background color of the grid is only the size…
I have a grid with 2 areas. It works fine with grid-template-areas: "list details". Why does it create a 3x2 grid if I specify only one area: grid-template-areas: "list"? And why does it stick the second area in the bottom…
I am trying to built a basic portfolio for my Freecodecamp project but I cannot understand by error as to why the grid property is not working. Here is the code: #projects { padding: 3rem 2rem; width: 100%; height: 120%;…
Using css grid for this vertical table, I want the top row height to be larger than the other rows. How can I make it, for example, 100px? I believe grid-template-rows: repeat(4, 25px); controls the height... but I have not…
More exactly, I'd like the date and category to always be at the bottom, but no lower than the thumbnail, regardless of the height of the title. When the title is too long, the "surplus" should not be visible. When…
I have a form that looks like this: I have laid it out using CSS grid: <div style="display: inline-grid; grid-template-columns: auto auto auto auto"> <div><input></div> <div><input></div> <div><input></div> <div style="font-family: sans-serif; font-weight: bold; font-size: 20px; line-height: 20px;">⊖</div> <div><input></div> <div><input></div> <div><input></div> <div…