css-grid

问题 This question already has answers here : Aligning grid items across the entire row/column (like flex items can) (2 answers) Closed last month . I am using CSS Grids. I want to offset an element so that it horizontally moves across the grid columns. I also want this element to retain its current width, and apply the offset value in addition to the element's width. Example: .container { display: grid; grid-template-columns: repeat(4, 1fr); } .item { grid-column: span 1; background-color: orange

问题 I have a div containing a variable number of children. This code is generated and I can't modify it. So with only CSS I need to display divs in a table with two rows: The first row contains only the first div (100% width) The other div share the second row : each div will have the same width an the should totally fill the row. I tried with a grid layout + grid-template-columns but using grid-template-columns does not because because it supposes I know the number of columns. For example, the

问题 This question already has answers here : Why does Chrome 80 cause this grid-template-rows: auto problem [duplicate] (4 answers) Closed 11 days ago . I have a css grid with 2 columns and 3 rows. The third row content is not always present because of an angular ngif clause. An image is present in the first column that spans the 3 rows. With all that said, I get 2 different results in Chrome (80.0.3987.87, which is the latest stable as I post) and Firefox. Is there a way to control the rows so

问题 This question already has answers here : Why does Chrome 80 cause this grid-template-rows: auto problem [duplicate] (4 answers) Closed 11 days ago . I have a css grid with 2 columns and 3 rows. The third row content is not always present because of an angular ngif clause. An image is present in the first column that spans the 3 rows. With all that said, I get 2 different results in Chrome (80.0.3987.87, which is the latest stable as I post) and Firefox. Is there a way to control the rows so

问题 I have a number of div elements: <main> <div id="top">Top</div> <div id="left">Left</div> <div id="right">Right</div> </main> which I would like to show in a grid: ┌─────────────────┐ │ Top │ ╞══════╤══════════╡ │ Left │ Right │ └──────┴──────────┘ I would like to be able to hide one element and have the other fill its space. ┌─────────────────┐ │ Top │ ╞═════════════════╡ │ Right │ └─────────────────┘ The columns are not evenly spaced. I have used the following CSS for the main and div#top

问题 I have a jsfiddle. What I have : What I want : Problem : The hopefully relevant section is: grid-template-columns: repeat(auto-fit, 1fr); where both elements in my section have width: max-content; . This (and the expanded but technically identical form of repeat(auto-fit, minmax(auto, 1fr)); ) do not do what I expect - it creates picture 1, I expect it to look like picture 2. It looks like the minimum width for these elements is too large, so instead of being on one row, it puts them in

问题 I've just begun fiddling with the CSS Grid and I'm curious as to how to create a fixed header. Should I create a two row grid where row one is the header and row two is another grid for the content? Or is there an easier way to approach this? I've added height to the divs within the grid to enable scrolling. Here is the HTML/CSS I've set up for testing: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,

问题 I've just begun fiddling with the CSS Grid and I'm curious as to how to create a fixed header. Should I create a two row grid where row one is the header and row two is another grid for the content? Or is there an easier way to approach this? I've added height to the divs within the grid to enable scrolling. Here is the HTML/CSS I've set up for testing: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del,

问题 This question is about whether CSS grid "span counting" -- whether it should start on implicit grid line. In CSS Definitive Guide, 4th Ed, p. 695, it is said that box4 is where things really get interesting. It ends on the fifth row line, which is to say the second implicit grid line. It spans back three lines—and yet, it still starts on the same grid line as box3. This happens because spans have to start counting within the explicit grid. Once they start, they can continue on into the

问题 This question is about whether CSS grid "span counting" -- whether it should start on implicit grid line. In CSS Definitive Guide, 4th Ed, p. 695, it is said that box4 is where things really get interesting. It ends on the fifth row line, which is to say the second implicit grid line. It spans back three lines—and yet, it still starts on the same grid line as box3. This happens because spans have to start counting within the explicit grid. Once they start, they can continue on into the