css-grid

问题 I'm trying to make a game with a grid. I have x divs with x divs inside them, to create the grid. The problem is that I want the container div for all of this to only be as big as it needs to be (say, 5x5 squares at 25px each = 125px x 125px container div). The height is fine, but the width stretches to the end. Each box is to be 25px. I've tried grid-template-rows: repeat(auto-fill, 25px) which doesn't seem to work. I can't set it to a specific width (125px) because the amount of squares is

问题 I have a webpage designed using CSS Grid. This is how it looks like - There are certain cases where I want to remove the Username - CSS Grid User such that the rendered page looks like this - I am using this in a react/redux project. Based on a variable, I have to show/hide the username of the user. Thus I want to change the number of rows of the grid, I tried making the class display: none like so .username { display: none; } However, all it does is removes the CSS Grid User string, but the

问题 I really love the simplicity and ease of manipulation of grid-template-areas , but is there an easier way/shortcut to indicate an area spans multiple columns (say 12) — within the template? This starts to get pretty gross when you have 12 columns... .wrapper{ display: grid; grid-template-areas: "nav nav cont cont cont cont cont cont cont cont cont cont"; @media all and (max-width: 839px){ grid-template-areas: "nav nav cont cont cont cont"; } } 回答1: You can combine it with grid-template

问题 I realise too late that my grid is not working properly with IE11. how can i make that grid-column-start and grid-column-end working with IE11? https://codepen.io/matoeil/pen/OzNmXW > <div class="field-items"><div class="entity entity-paragraphs-item > paragraphs-item-bloc-de-type-titre column_start_1 column_end_7"><div > class="" about="" typeof=""> <div class="content"> > <div class="field field-name-field-p-titre-titre field-type-text-long field-label-hidden"><div class="field-items"><div

问题 On Mozilla this pen works. But when I switch to Chrome it breaks. It's just me or something is wrong with browsers? .container { height: 500px; width: 500px; background-color: beige; display: grid; grid-template-rows: 1fr; grid-template-columns: 1fr; } .container h2 { position: absolute; justify-self: center; align-self: center; grid-row: 1; grid-column: 1; } <div class="container"> <h2>TEXT</h2> </div> codepen LINK 回答1: It appears that Chrome has deviated from spec guidance on this issue.

问题 I am looking for a way to achieve this effect: On the mobile layout, elements are placed one under the other in a column: On the desktop layout, however, elements are placed in two columns, with odd elements in one column and even elements in the other. The columns are shifted vertically relative to one another: I wonder whether there is a CSS-only way to achieve this positioning. CSS grid comes tantalizingly close, if only there were a way to say that, for example, nth-child(n+1) would span

问题 In my grid, I display my items in 3 columns. I want to draw a red divider between the 3 columns. I tried to add a right border to the cells. The problem: When the number of items is 4 (or 7 or 10 and so on) the right border of the 5th cell in the grid is missing, since there is no item in this grid cell. I want the border between the 2nd and 3rd column to reach till the bottom of the grid. In different screen resolutions the number of columns may be different (2 or 4). I want to handle this

问题 The MDN documentation of justify-items states that: In block-level layouts, it aligns the items inside their containing block on the inline axis. Now, I thought that this property is intended to be used only in display:flex or display:grid elements, but the specification states that it can be used on all elements . So I wanted to try out how does it work with a display:block , but unfortunately I can't make it work in any way. It just does nothing. So my question is: can someone please

问题 What grid property should I use to keep the grid perfectly inside the screen? Using height: 100vh; on .wrapper adjusts the height, but it introduces the scrollbars. To remove the unwanted scrollbars, I tried setting body{margin:0;} but I want to have a margin surrounding the entire grid without producing the scrollbars. I'm sure this is an easy fix, but please help me! Codepen: https://codepen.io/reiallenramos/pen/yzroxe html, body { height: 100%; width: 100%; } body { background-color:

问题 I have a grid that contains 7 dynamically sized divs surrounded by 2 blocks that should align with the 2nd row of the 7 dynamic div grid. I have it mostly working, except that the grid is orientated as columns and I want it to be rows. See fiddle, 1-7 should go across the top https://jsfiddle.net/juzkxo20/5/ <div class='content'> <div class='left'></div> <div class='column-with-dynamic-content'> <div class='dynamic'>1</div> <div class='dynamic'></div> <div class='dynamic'></div> </div> <div