css-grid

问题 Consider a CSS grid where rows can have variable heights: .grid { display: grid; grid-template-columns: repeat(8, 1fr); grid-column-gap: 16px; grid-row-gap: 8px; } .first { grid-column: 1 / 3; background-color: #ccc; } .second { grid-column: 5 / 6; grid-row: 2 / 5; background-color: #ccc; height: 120px; } <div class="grid"> <div class="first">First</div> <div class="second">Second</div> </div> When hovering on the grid element in DevTools, Chrome visualizes the grid like this: How could I

问题 I'm looking for a creative way of doing responsive layout without media query. Let's say I have a row of two boxes. First one has min width of 400px. Second one has min width of 200px. The gap between them is fixed width 60px. If the container is larger than 660px, then two boxes should expand proportionally. If the container is less than 660px, then the second box should go to next line, and both boxes' widths should be 100%. I almost got it with css flexbox. See here. Except that when the

问题 If I have a grid which auto-flows columns display: grid; grid-auto-flow: column; So I don't know the number of columns I have how would I say "I want all columns to be the minimum size for the contents and the last column to fill all available space"? I'm aware that in the simple case this is achievable with flexbox, I'm trying to bolster my grid knowledge specifically. 回答1: If it's about the first column, you can easily do it by defining one template (the explicit grid) to 1fr and the

问题 What I want Sidenotes . The foremost concern is, of course, placing them at a height relative to that of the text referencing them . I can do it with JavaScript, looking at the offsetTop property of the note reference, but then I would have to handle viewport resizes and zooming as well, whereas a CSS solution would leave that to the browser. A CSS solution is thus preferable. Background and motivation This is part of the responsive design of a blog. Notes shall be displayed as sidenotes if

问题 I just noticed some values of the align-self property that I haven't seen before. What are start , end , self-start , and self-end and what are their differences from flex-start and flex-end ? I've been referring to the guide at CSS-Tricks often when I work with flexbox, but it doesn't mention these values. I read the documentation for align-self at MDN, but the one-line description of the values isn't enough for me to understand. I thought I might be able to play around with the values to

问题 The red sidebar in this page needs to be 100% of the container height: body { display: grid; min-height: 85vh; grid-template-columns: auto 10fr 4fr; grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content); grid-template-areas: "header header aside" "main main aside" "footer footer footer"; } header { grid-area: header; background: pink; } footer { grid-area: footer; background: blue; } main { grid-area: main; background: green; } aside { grid-area: aside; background: red;

问题 The red sidebar in this page needs to be 100% of the container height: body { display: grid; min-height: 85vh; grid-template-columns: auto 10fr 4fr; grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content); grid-template-areas: "header header aside" "main main aside" "footer footer footer"; } header { grid-area: header; background: pink; } footer { grid-area: footer; background: blue; } main { grid-area: main; background: green; } aside { grid-area: aside; background: red;

问题 I'm interested does CSS Grid has feature to create repeatable grid-template-areas ? To explain the feature i created this example, .grid { display: grid; grid-template-columns: repeat(3, 1fr) 6rem; grid-template-areas: '. . . button' '. . . button' '. . . button' '. . . button'; grid-gap: 1rem; } .item { background: #add8e6; padding: 1rem; } .button { grid-area: button; background: #ffc0cb; padding: 1rem; } <div class="grid"> <div class="item">Item</div> <div class="item">Item</div> <div

问题 I'm interested does CSS Grid has feature to create repeatable grid-template-areas ? To explain the feature i created this example, .grid { display: grid; grid-template-columns: repeat(3, 1fr) 6rem; grid-template-areas: '. . . button' '. . . button' '. . . button' '. . . button'; grid-gap: 1rem; } .item { background: #add8e6; padding: 1rem; } .button { grid-area: button; background: #ffc0cb; padding: 1rem; } <div class="grid"> <div class="item">Item</div> <div class="item">Item</div> <div

问题 I'm interested does CSS Grid has feature to create repeatable grid-template-areas ? To explain the feature i created this example, .grid { display: grid; grid-template-columns: repeat(3, 1fr) 6rem; grid-template-areas: '. . . button' '. . . button' '. . . button' '. . . button'; grid-gap: 1rem; } .item { background: #add8e6; padding: 1rem; } .button { grid-area: button; background: #ffc0cb; padding: 1rem; } <div class="grid"> <div class="item">Item</div> <div class="item">Item</div> <div