css-grid

I'm trying to create a table using CSS grid, with equal columns based on the content. I want to avoid using <table> . This is a follow-up to this question: Auto-adjusting columns with CSS grid What I'm trying to achieve: This table works: https://codepen.io/anon/pen/baExYw But I want to wrap the each row in a div , which unsurprisingly breaks the table. This table is broken: https://codepen.io/anon/pen/qpbMgG app.html <div class="wrapper"> <div class="box a">col 1</div> <div class="box b">col 2</div> <div class="box c">col 3</div> <!-- Table Row --> <div class="row"> <div class="box d">short

I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it. main { display: grid; grid-template-columns: 20% 55% 25%; grid-template-rows: 55px 1fr; } nav { background: blue; grid-row: 1; grid-column: 1 / 4; } section { background: grey; grid-column: 1 / 2; grid-row: 2; position: sticky; top: 0; left: 0; } article { background: yellow; grid-column: 2 / 4; } article p { padding-bottom: 1500px; } <main> <nav></nav> <section>

I've been experimenting with CSS Grid and am stuck on finding the most effective means to have text wrap around a <div> element that is positioned partially on-top of two other <div/> elements. Basically, like in the image below, I want the text in the red and blue divs to wrap around the yellow div that has been partially positioned in the columns and rows of the other two elements. Obviously, this is a Grid based layout, so I'm not interested in doing this with typical floats. How can I use CSS Grid to achieve this effect? Here is my css and html: .grid { display: grid; grid-template-columns

Why do I have an overflow on the X axis in the following snippet? The overflow is generated once I apply grid-gap: 10px on my .body grid container. div:not(.header):not(.body):not(.row) { border: 1px solid grey; } .header { margin-top: 20px; display: grid; grid-gap: 10px; grid-template-areas: "header-left header-right-up" "header-left header-right-down"; grid-template-rows: 40px 40px; grid-template-columns: minmax(50px, 200px) auto; } .header-left { grid-area: header-left; } .header-right-up { grid-area: header-right-up; } .header-right-down { grid-area: header-right-down; } .body { margin-top

I come from a heavy div/float background to build responsive sites (e.g. Bootstrap 3, Foundation) and used Flex box briefly but have been attempting to use Grid everywhere since it's been really great at solving a number of problems. I seem to run into "simple" problems like this all too often and feel like I'm missing some basics, and can't find the answer in docs. Anyways, to the code. Given a grid setup like so: display: grid; grid-auto-columns: max-content; grid-auto-flow: column; the content doesn't wrap to a new row once it's filled the width of its parent element. Ideally, I'd be able

This question already has an answer here: Centering in CSS Grid 5 answers I have come across this problem recently. Lets suppose I have a simple <h1> tag and I want to center it vertically, so even when I re-size the window, it will remain in the middle of one of my grid box rows, neglecting its horizontal position. I know that when it comes to grid containers, vertical-align has no effect. So what would be the solution? This question has been marked as a duplicate, however, the other question asks about centering text horizontally, whereas, here, I'm asking about vertical centering.