css-grid

问题 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

问题 According to the spec, the value for grid-area is grid-line, which further uses custom-ident. Then MDN states that identifies cannot be put between quotes, which will make it a string value, which by itself is reasonable. But adding these all up, named grid areas must be accessed via an ID without quotes. See the comparison in the example below: .grid { display:grid; grid: "a b" 1fr "c d" 1fr / 1fr 1fr; } .foo { /* this works just fine, putting it to area b in upper right corner */ grid-area:

问题 According to the spec, the value for grid-area is grid-line, which further uses custom-ident. Then MDN states that identifies cannot be put between quotes, which will make it a string value, which by itself is reasonable. But adding these all up, named grid areas must be accessed via an ID without quotes. See the comparison in the example below: .grid { display:grid; grid: "a b" 1fr "c d" 1fr / 1fr 1fr; } .foo { /* this works just fine, putting it to area b in upper right corner */ grid-area:

问题 Let's say we have a list of news entries with 7 items. I've created a pattern with CSS Grid that that should repeat itself after 6 items. @supports (display: grid) { .list { display: grid; grid-gap: 25px; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; grid-template-areas: "bigLeft bigLeft right1 right2" "bigLeft bigLeft bigRight bigRight" "left1 left2 bigRight bigRight"; } .item:nth-of-type(6n+1) { grid-area: bigLeft; } .item:nth-of-type(6n+2) { grid-area: right1; } .item

问题 I have a page with four forms. Each form's layout is defined using the following CSS grid configuration, which is shared between all of the forms: .base-grid-wrapper { display: grid; grid-template-columns: repeat(12, 1fr); grid-row-gap: 1em; grid-column-gap: 1em; width: 75%; } Since Chrome 80 was released, the styling for the first of these forms has been (sort of) broken. The computed values for grid-template-columns is non-uniform, but only for the first of the four forms. For the following

问题 Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works? I can’t see it in the spec but perhaps I’m missing something or perhaps there’s something in development? 回答1: Is there a css grid property to add a rule (vertical line) between grid columns, and a rule (horizontal line) between grid rows, in the same way, or similar, that column-rule works? NO There is no such

问题 I have a CSS grid but I am struggling to make the layout fit. As you can see below, all is correct, however I want 'Item 1" and "Item 6" to be the same height so it all runs fluidly. .grid > div {background:red;border:2px solid blue;} .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; } .span-col-4{grid-column: span 4 / auto;} .span-row-2{grid-row: span 2 / auto;} .span-row-4{grid-row: span 4 / auto;} <div class="grid"> <div class="span-row-2">Item 1</div> <div

问题 In my css grid I have one large item in the left column and three smaller items in the right column: .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-template-rows: repeat(3, 50px); grid-auto-flow: column; } .item-1 { background-color: black; grid-column: span 1; grid-row: span 3; } .item-2, .item-3, .item-4 { grid-column: span 1; grid-row: span 1; } .item-2 { background-color: deeppink; } .item-3 { background-color: yellow; } .item-4 { background

问题 I want to create a chat using CSS grid and ran into the problem that I cannot combine align-self: end; and overflow-y: auto; . The ul holds all the messages and should be aligned to the bottom, so that even when there is only one message, it appears on the bottom. The header and the footer of the chat are fixed and you only scroll through the messages (like Whats App and similar applications). I created this pen with some messages. The messages go through the header and it never allows me to

问题 I have three columns and one row and I want to place each grid-element into one of the three resulting cells. This is what I want, using three container-elements: main { display: grid; grid-template-columns: 33% 33% auto; grid-gap: 15px; } .container { background-color: orange; } .element { transition: height 0.5s; margin: 15px; height: 100px; background-color: grey; } .element:hover { height: 200px; } <main> <div class="container"> <div class="element"></div> <div class="element"></div> <div