css-grid

I use an invisible pseudo-element ( ::after ) that occupies the last slot in the container. But if there is only one element, I'd like to position it in the center. So in order to do it I need to "remove" the pseudo-element in that case. How do I do it if it's possible? .main { background: #999; margin: 0 auto; width: 500px; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { background: #7ab9d7; color: #555; height: 30px; width: 30%; margin-bottom: 30px; text-align: center; font-size: 30px; padding-top: 120px; } .main::after { height: 0; width: 30%; content: ""; } <div

I've read a lot of tutorials about CSS flex boxes and CSS grids, but frankly I just can't figure out how to do this simple(?) thing. All I want is for the elements in a container to all be as wide as the widest element. I don't want them to fill up the whole width of the container, just all grow to the maximum width. Can that be done with CSS? Consider this HTML: <div class="container"> <button>a normal button</button> <button>tiny</button> <button>a really, really, really wide button</button> </div> That produces something like this: What I want is something like this, where they're all the

I have a header that is 70px high, the main content which I want to fill the rest of the screen and then a 70px footer. I am trying to find the most simple approach of hiding a footer. This works with the footer in view - see jsfiddle and snippet below: * { margin: 0; padding: 0; } *, *::before, *::after { box-sizing: border-box; } body { display: grid; margin: 0px; grid-gap: 10px; height: 100vh; grid-template-columns: [side__nav] 250px [main] 1fr; grid-template-rows: [header] 70px auto [footer] 70px; } .header { grid-column: main; grid-row: 1; background: pink; } .side__nav { grid-column:

CODEPEN: https://codepen.io/matthewharwood/pen/ywKNVg I'm trying to achieve this layout in GridCSS: Problems: I'm having trouble making the children .elements overflow their parent .grid when using grid-column: span 4; . Note: Children will peak on mobile Grid will have scroll bars if children overflow Children perfectly follow the grid. Question: Is it possible to make CSS Grid Items overflow with a scroll bar when its children are aligned to the grid using grid-column ? if so, what properties am I missing? If not, is are there any work arounds to achieve these layouts shown above, when using

I'm trying to build a web layout with a title bar, a nav header, a footer and a main content area in the middle (split in two for a sidebar and main view). I intend to use CSS Grid layout for it. My current code manages it all, except: The main content (and sidebar) adjust to its content. And that's not what I want. How can I make that 3rd grid row fill all remaining vertical space? * { box-sizing: border-box; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-rows: min-content min-content auto min-content; grid-gap: 10px; grid-template-areas: