css-grid

问题 I've setup a css grid with 3 columns to display our portfolio. I found a working code for Firefox and Internet Explorer and Safari. However on Chrome it doesn't show my grid at all, all the pictures are below each other. See the website: http://www.ddw-sanitair.be Additionally it does not accept the 'display: none' class on some of the pictures, hence the double/triple images ... Any suggestions? I tried to add grid-auto-rows: 270px; as suggested in another thread. I tried adding grid

问题 Hey there I am new to CSS grid. Have a look at the following example: .platform { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-gap: 20px; } .item { width:100%; background-color:#aaa; padding:10px; box-sizing:border-box; text-align:center; } .wrapmed { max-width:400px; } .wrapsmall { max-width:300px; } <div class="platform"> <div class="item">a</div> <div class="item">b</div> <div class="item">c</div> <div class="item">d</div> </div> <br/><br/> <div class=

问题 @michael-benjamin Center and right align flexbox elements almost what I want, but with 2 differences: Div have to take empty space at left side too (when it be wide) Div have to collapse text when there is no empty space around at all. What I have? A is main centered object and BBBBBBBBBBBBBBB is right object. This is fine till A will grow: What I want? Is it possible to do with flex/grid/table-tr-td/any other css tricks? What I tried? CSS Positioning Properties - can't stop when grow to B

问题 @michael-benjamin Center and right align flexbox elements almost what I want, but with 2 differences: Div have to take empty space at left side too (when it be wide) Div have to collapse text when there is no empty space around at all. What I have? A is main centered object and BBBBBBBBBBBBBBB is right object. This is fine till A will grow: What I want? Is it possible to do with flex/grid/table-tr-td/any other css tricks? What I tried? CSS Positioning Properties - can't stop when grow to B

问题 In this series they all used a wrapper div. MDN - CSS GRID Layout Is this necessary, and if yes, why? 回答1: The purposes of wrappers are several, including: to group elements semantically, for instance to separate page heading from body text from sidebar from footer. to group elements cosmetically, such as with a surrounding border or a common background image or color. to group elements in layout, such as to keep them all in the same column when columns are floated next to one another. to

问题 Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic. The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent. By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid. How can the footer, being in the last

问题 I'd like to display a number of divs in left-to-right order, giving them an equal amount of space and spreading them over two rows. e.g. [div 1] | [div 2] | [div 3] [div 4] | [div 5] | [div 6] or [div 1] | [div 2] | [div 3] | [div 4] [div 5] | [div 6] | [div 7] | [div 8] What's important is that I don't know how many elements there will be. If it's six, then I'll need three columns. If it's eight, then I'll need four columns. And so on. If I give the grid container the following attributes:

问题 I've finally got a "Random Quote" container with a functioning javascript/button. Currently, it works in my main center section (oneSUB) but not in a different div. I'd like to be able to move this to a different grid space like "four" in my code. "four" is the bottom right smaller box below "oneSUB" The problem is the button (btnQUOTE) doesn't show up in "four" It's possible it's just off the screen as I saw that in previous attempts at making a random quote button...but stuff was different.

问题 Here is my code: grid-template-columns: repeat(auto-fill,minmax(120px, 1fr)); I am trying to make my grid layout work on IE11. I found that repeat() is not supported and I should rewrite it. But I could not find any way to rewrite it without knowing the specific number of repeats. Autoprefixer did not help. Is this even possible? 回答1: IE11 uses an older form of CSS Grid, so you can't rely on the modern CSS Grid you might already know. You can fiddle with the old grid but it's a pain. What I

问题 I have a CSS grid container with 3 children, all with a different width. I want the 2 side children to be at the 2 sides of the container and the middle child to be at the center. I tried setting the first one to justify-self: start , the middle one to justify-self: center; , and the last one to justify-self: end; , but it doesn't get centered, it just divides the space evenly. .container { display: grid; grid-template-columns: auto auto auto; height: 100px; } .first { justify-self: start;