css-grid

问题 If I want to use the css-grid and make one of its child fill up the remaining width when the other child is not present on the screen, how would I do something like that? var button = document.querySelector('.click'); var buttone = document.querySelector('.clicke') var left = document.querySelector('.left'); button.addEventListener('click', function(e) { left.style.display = 'none'; }) buttone.addEventListener('click', function(e) { left.style.display = 'block'; }) html, body { margin: 0; }

问题 Rather than rely on media queries, I've been trying to create a responsive component using css grid so that it'll make use of available space in different layouts. If the space is large enough there should be two columns, the first is fixed width (containing an image) and the second takes the remainder (with text), a 2x1 grid. If it's not then there should be a single column taking all available space and the grid changes to 1x2, e.g. Wide 2x1 grid +---+---------+ | o | text | +---+---------+

问题 I am not able to get text-overflow ellipsis to work in a css grid. The text is truncated but the ellipsis dots don't show up. Here is my css: .grid { display: grid; margin: auto; width: 90%; grid-template-columns: 2fr 15fr } .gridItem { border: 1px solid red; display: flex; height: calc(50px + 2vw); align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } <div class="grid"> <div class="gridItem">Why no ellipsis on this div?</div> <div class="gridItem"></div> <div

问题 I want this 3 boxes to display next to each other, with same width of 381px Their parent is .boxes and they are .box I can do that with the following on parent: .boxes { display: grid; grid-template-columns: repeat(3, 381px); } BUT : If in future I want to add one more box, I want that .box to also be 381px wide. I don't want to specify number 3, I want it to be infinite columns of 381px if new box appears I want to achieve same result as: grid-template-columns(auto-fit, 381px); But I don't

问题 I want this 3 boxes to display next to each other, with same width of 381px Their parent is .boxes and they are .box I can do that with the following on parent: .boxes { display: grid; grid-template-columns: repeat(3, 381px); } BUT : If in future I want to add one more box, I want that .box to also be 381px wide. I don't want to specify number 3, I want it to be infinite columns of 381px if new box appears I want to achieve same result as: grid-template-columns(auto-fit, 381px); But I don't

问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 2 years ago . Improve this question I have CSS Grid: <div style="display:grid; grid-template-columns:repeat(5, 1fr); grid-template-rows:repeat(5, 1fr); align-items: center; justify-items: center;" sc-part-of="placeholder rendering" class="scEnabledChrome"> </div> when I inspect grid in Chrome

问题 How can I be able to create dynamic equal-sized squares inside a fixed big square? size should be according to number of squares. 回答1: This will be the most universal solution. Using CSS grid whit countable column and rows, according to the sum of children element. JS explanation: grid.children.length - counts children of grid div. Math.sqrt(grid.children.length) - returns the square root of a children length. Math.ceil(Math.sqrt(grid.children.length)) - rounds a number up to the next largest

问题 I am using CSS Grid layout to have a 3 column layout. Even though I have mentioned the list1 to span across 3 rows, the list1 is only spanning one row. .wrapper { max-width: 940px; margin: 0 auto; display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); } .wrapper>div { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; padding: 1em; color: #5a2916; } .item1 { -ms-grid-column: 1; grid-column-start: 1; grid-column-end: 4; -ms

问题 I'm trying to place bunch of divs side by side, left to right. So I'm using a flexbox with direction set to row . I want each of those divs to derive their height and width from the content inside, hence I have left their height and width to default. Lastly, I want to use an svg as the background. For that, I'm using a grid container and placing both the svg and the div in the same column and row as suggested in this stackoverflow post. Im setting the height and width of the svg to 100% to

问题 Looked into a few questions here but they don't quite solve what I'm looking for. Say I have a website and I want. On desktop I want this: This is easy. grid-template-columns: repeat(3, 33%) (basically) On mobile, however, I want this What I'm running into is happens before it flips to a single column: I'm trying clamp() , minmax() , and all sorts of things but nothing ever works as I want. Yes, I can totally use a media query but I was hoping to create a truly fluid grid/flex layout using