css-grid

问题 I've got a nifty responsive css template using css grids and I'd like to make the header of this responsive css grid sticky, but because of the way the header and nav is designed, I can't get it to use fixed positioning. is there a better way of doing this with some grid property I might not have seen yet? * { margin: 0; padding: 0; } body { display: grid; font-family: sans-serif; } a { text-decoration: none; color: white; } header, nav { background: blue; color: #fff; position: fixed; } nav

问题 .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; grid-auto-rows: 60px; grid-gap: 15px; } .col { background-color: tomato; } <div class="grid"> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> This creates 2 rows, first is 100px height, second is auto-created with 60px height. 2 columns in the second row have 1fr width. Is this possible via CSS Grid/Flexbox to horizontally

问题 I'm building a responsive template with CSS Grid Layout (still learning) and thanks to a few of you on here, I've got most of it working. mobile (max-width: 767px) everything should appear on its own row tablet (min-width: 768px) nav is on the first row aside and main on the second desktop (min-width: 992px) same as tablet but with 10% of spacing horizontally xl desktop (min-width: 1920px) same as desktop but has a max-width of 1920px The thing is I'm using a header tag to color the spacing

问题 I made a design using css grids which gave me unexpected space between rows. I reproduced my issue with the following code: main { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; } article { background: red; } .item1 { height: 30px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2; } .item2 { height: 100px; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } .item3 { height: 300px; grid

问题 I came across a bit quirky behavior. At least it seems quirky to me. You can check it out here: https://fiddle.jshell.net/mxmcd9Lw/8/show/ Mainly when a element's height changes its parent element scrolls automatically to the top (you need to scroll down a bit first). Seems like offset top is lost because of the repaint that is caused by a height change. structure is based on CSS Grid body overflow is set to hidden main container .l-page is set to 100vh scrolled container .l-content body {

问题 I'm having fun getting my head around the new CSS Grid spec, but I'm running into trouble with borders. Is it possible to collapse borders in a CSS Grid, or is there any way to style the gutter? As you can see in the snippet below, the 10px borders stack ( 20px total) in-between blocks. I understand this issue isn't unique to CSS Grids, but I'm hoping it'll allow for new solutions for creating a uniform 10px border between all boxes and on the outer edges. My actual use-case is a calendar I'm

问题 I am trying to achieve the following layout using CSS grid... I currently use flex to generate it like this.. .row1 { display:flex; } .row1 .item { background:red; width:50%; padding:20px; margin:10px; color:white; text-align:center; } .row2 { display:flex; } .row2 .item { color:white; text-align:center; background:red; width:33%; padding:20px; margin:10px; } <div class="row1"> <div class="item"> Item </div> <div class="item"> Item </div> </div> <div class="row2"> <div class="item"> Item <

问题 I've looked at other examples of this on here but can't find one that makes this work. I want the sidebar (section) to be sticky while the page scrolls. the position: sticky works if I put it on the nav, so my browser def supports it. main { display: grid; grid-template-columns: 20% 55% 25%; grid-template-rows: 55px 1fr; } nav { background: blue; grid-row: 1; grid-column: 1 / 4; } section { background: grey; grid-column: 1 / 2; grid-row: 2; position: sticky; top: 0; left: 0; } article {

问题 I'm trying to use CSS grid layout to simulate some responsive behavior, specifically with: grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); My example https://codepen.io/elgs/pen/goNxeL works well in Chrome, however, it doesn't seem to work in Firefox. You will find it when you resize the browser horizontally. Another example https://codepen.io/elgs/pen/YYoxOq works well in both Chrome and Firefox. html,body { height: 100%; width: 100%; margin: 0 auto; padding: 0; } body {

问题 I am trying to create an ordered multi-column list, but am struggling with CSS Grid layout rules. The desired outcome should be responsive. On small screens 2 grid columns, on larger screens up to 4, all while maintaining a column order. Instead of being ordered like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 They should be ordered like this: 1 5 9 13 2 6 10 14 3 7 11 15 4 8 12 I feel I am close with this fiddle. ol { margin: 0; padding: 0; list-style: none; background-color: grey; display: