css-grid

问题 I am having an issue where a ghost line is being added to some text in a CSS grid when it has a certain number of characters. This is my first time using CSS grids, and I suspect that it's related to the grid. I see the issue (using Mac OS X) in Chrome and Safari, but not in Firefox. .grid { display: grid; border: 1px solid black; } .grid > .row { display: grid; grid-template-columns: repeat(12, 1fr); } .col-10 { grid-column-end: span 10; } .blue { background-color: blue; } <div class="grid">

问题 Question: CODEPEN How can I design a grid using CSS Grid to make a Carousel that's grid items are responsive to a fixed number of grid columns which will vary per breakpoint? PROBLEM: The grid-items don't scale as expected on responsive breakpoints. The grid-items peak out not to spec. Please checkout a video of how I want grid-items to scale per breakpoint: https://imgur.com/070Zwve Background I asked a previous question about how I can make grid-items flow horizontally using css grid: Grid

问题 This question already has answers here : Prevent content from expanding grid items (3 answers) Closed 2 years ago . I can easily render a flexbox with some text and a button, where the text will shrink and truncate with an ellipsis if its container shrinks: .titleBarCtr { align-items: center; display: flex; } .titleBar { color: white; background-color: green; flex: 1; height: 44px; line-height: 44px; margin: 0; padding-left: 5px; text-align: left; } .titleBarCtr .icon { background-color:

问题 I recently answered a question about CSS grid. But in my answer I used a style that worked, but against what I believe would be the standard way. Take a look at the following snippet. The red cell has this style: grid-column: 3 / 4; .grid { width: 200px; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 50px; grid-column-gap: 5px; grid-row-gap: 5px; grid-auto-flow: dense; } .cell { background: tomato; width: 100%; height: 100%; } .cell:nth-child(10n + 1) { background: red

问题 This question already has answers here : Prevent content from expanding grid items (3 answers) Closed 2 years ago . I meet a confused problem with CSS grid. I have a grid with 2 columns, the first is 100px, the second is fit the remaining ( grid-template-columns: 100px auto ). Everything works right. But if the second column has an extra large element, the width of second column is overflow. I tried to use the max-width but it doesn't work. Here is my fiddle, please check it: https://jsfiddle

问题 Right now, when two grid items share the same row and column they overlap each over. <div class="some-grid-container"> <div style="grid-row: 1; grid-column: 1">Item 1</div> <div style="grid-row: 1; grid-column: 1">Item 2</div> </div> How do I them not overlap? Probably behave like flex items when sharing the same row and column. (Without making an outer container). 回答1: Your syntax is not correct. Inline styles are not using those braces "{", "}". And additionally you need to specify the

问题 I am building a dashboard and would like to use CSS-grid. I have set a 4 column grid. Within the 3rd row I need 2 of the items to span 1.5 columns. How do I make D and E equal width so they each take up half of the available space where they are together equal the width of C? Do I need to create a different column structure? Codepen body { margin: 40px; } .wrapper { display: grid; grid-gap: 5px; grid-template-columns: [col1-start] 1fr [col2-start] 1fr [col3-start] 1fr [col4-start] 1fr [col4

问题 I have this situation: https://jsfiddle.net/rozkvsdh/5/ A CSS Grid, simply, but in some items, I need to put a ribbon or another div. It's impossible! How can I do? grid-item { background-color: lightgreen; display: flex; justify-content: center; align-items: center; } .ribbon-wrapper { width: 85px; // the length should be not in px I think! height: 88px; // the length should be not in px I think! overflow: hidden; //position: absolute; it doesn't work! position: relative; top: -3px; left:

问题 When defining grid-template-columns in the corresponding parent div this is fine. wrapper { display:grid; grid-template-columns: 1fr 1fr 700px; } But what if I only want two columns? If I delete one of the fr columns, it gets whacked. So does a grid have a min of fr units if I am to use this? Go ahead and you will see the 2nd column is no longer 700px. wrapper { display:grid; grid-template-columns: 1fr 700px; /* removing the 1fr defining only 2 columns, destroys the layout */ } A simple

问题 I have the following for desktop, which creates 4 equal columns all at 25%. .footer-inner { display: grid; grid-template-columns: repeat(4, 1fr); } <div class="footer-inner"> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> </div> However, how can I resize these in a media query to make the first column go 100% and the rest of the columns naturally wrap underneath and now be 33.333% still using CSS grids? .footer-inner { display: grid; grid-template-columns: 100% 1fr 1fr 1fr; /*