css-grid

This question already has answers here : Aligning grid items across the entire row/column (like flex items can) (2 answers) Closed last year . In a flexbox I can specify flex-grow:1 on a child to say it should take up the remaining space. html, body { height: 100% } <div style="display:flex;flex-direction:column;height:100%"> <div style="background-color:yellow;height:50px"></div> <div style="background-color:red;flex-grow:1"></div> </div> Is it possible to do the same thing with css grid? i.e. to specify against a child item that it should use remaining space without defining it explicitly

Is it possible to automatically span the last column to occupy the remaining space in the grid? Basically I'm trying to achieve this: .row { display: grid; grid-template-columns: repeat(3, 1fr); } .col { background: blue; padding: 20px; border: 1px solid red; } .col:last-child { background: yellow; /* missing magic here */ } <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> </div> <div class="row"> <div class="col"></div> </div> Unfortunately, it seems that in current version of CSS

This question already has answers here : CSS grid square layout [duplicate] (4 answers) Closed 8 months ago . I'm trying to build this responsive grid for an image gallery. I want the grid items to be square-shaped at all times (aspect ratio 1:1), even though the pictures are coming in all sorts of aspect-ratios. I'll probably display any picture inside the square items, using object-fit: cover . I'm trying to get a solution that works well across browsers. Nothing too hacky . It's seems like a simple task but so far I couldn't wrap my head around it. See an example on the code snippet that I

I have an input element, inside a CSS grid container. The container should be 100 pixels wide, with the input element taking up most of the space, and an other-thing taking up the remaining 24px. I am using grid-template-columns for this. This works fine if I make the parent container 200px instead of 100px: .container { grid-template-columns: 1fr 24px; grid-template-rows: 1fr; display: grid; justify-content: center; align-items: center; width: 200px; /* Try 100px */ background-color: red; } And the following HTML <div class="container"> <input value="hello"/> <div class="other-thing"> x </div

Let's say I have a 3-column CSS-Grid. Is there a way, using JavaScript, to get the grid-row and grid-column of an auto-placed element? Example: console.log($('#test').css('grid-row'), $('#test').css('grid-column')); // expected output: 2 3 // actual output: two empty strings .grid { display: grid; grid-template-columns: repeat( 3, 1fr); } <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div id="test"></div> <div></div> <div></div> <div></div> </div> Here is a JSFiddle of the example: https://jsfiddle.net/w4u87d2f/7/ In this example I could figure it out by

As far as I understand, anything flexbox can do, css-grid should also be able to do (usually more verbosely). Yet I cannot figure out how to mimic a flexbox with an item pushing off the others with margin: auto ul { list-style-type: none; padding: 0; display: flex; flex-direction: column; outline: 1px solid red; height: 200px; background-color: lime; } li { background-color: cornsilk; } li:last-of-type { margin-top: auto; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> See how all cells are sized to their content and the last li pushes the others away to appear at the end? How would I

Is it possible to shrink grid items just like flex items in css? Grid items .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .child { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding: 5px; border: 3px solid #a07; } <div class="container"> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> </div> jsfiddle Flex items .container { display: flex; margin-left: -10px; flex-flow: row wrap; }

I'm experimenting with CSS Grids, and this is the layout I'm building: .grid { display: grid; align-items: center; grid-template-columns: 1fr 4rem 1fr; grid-template-rows: 1rem 1fr 1rem; max-width: 900px; margin: 0 auto; } .text { /* // Ideally, this should be grid-area: text */ grid-column: 1 / 3; grid-row: 2 / 3; /* Fix z-index */ position: relative; padding: 4rem; background-color: #fff; } .image { /* // Ideally, this should be grid-area: image; */ grid-column: 2 / 4; grid-row: 1 / -1; background-color: lightgray; padding: 1rem; /* Center das image */ display: flex; justify-content: center;

I am trying to create an overlay in CSS3 grid but I can't seem to figure out how I can go about achieving it. I have searched online but haven't found anything of help. I want to achieve something like below: body { margin: 0; padding: 0; } .wrapper { display: grid; grid-template-rows: 1f; width: 100vw; height: 100vh; grid-template-areas: "a" "b" "c"; } .box { background-color: #444; color: #fff; } .a { grid-area: a; } .b { grid-area: b; } .c { grid-area: c; } <div class="wrapper"> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> </div> Here is a link to codepen

I have a layout consisting of a single ordered list containing a bunch of items. All items have consistent width and height - except the first item - which is (3x) wider and (2x) taller. It looks like this: ol { padding:0; margin:0; min-width: 488px; } li { list-style: none; width: 150px; padding-bottom: 16.66%; border: 5px solid tomato; display: inline-block; } li:first-child { float:left; width: 478px; border-color: green; padding-bottom: 34.25%; margin: 0 4px 4px 0; } <ol> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>