css-grid

问题 I want to use CSS Grid to align the items to stick to all 4 corners of the container box. How would I do this? Does it make sense to use CSS grid or is it better to use flex box? I have the following HTML: <div class="container"> <div class="box1">Box1</div> <div class="box2">Box2</div> <div class="box3">Box3</div> <div class="box4">Box4</div> </div> 回答1: .container { display: grid; grid-template-columns: auto auto; /* grid has two columns; content defines width */ justify-content: space

问题 I have a 3 X 3 CSS Grid. I have a row in which I have three items A , B & C . I want item C to have a rowspan of 2. To do so, I am using grid-row: 1 / span 2; . It is taking two rows, but it's being placed in the first column instead of simply lying in the 3rd column. I don't know why this is happening. I want item C to stay at the place where it is in the HTML. One work around to this problem is to explicitly setting grid-column: 3 / span 1 which I don't want to do. I want items to be placed

问题 This question already has answers here : Make a div span two rows in a grid (2 answers) Closed 9 months ago . In trying to learn more about CSS grid, I am trying to create some different grid layouts. The one I am trying to create is the following: Here is one step of this: .wrapper { display: grid; grid-gap: 15px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: repeat(8, 1fr); } .wrapper .first_box { grid-column-start: 2; grid-column-end: 4; grid-row-start: 1; grid-row-end: 7; }

问题 This question already has answers here : CSS Grid Layout not working in IE11 even with prefixes (4 answers) Closed 2 years ago . I've been following the guide here on getting grids working on IE 11. My problem is that even following those rules, the columns and rows just overlap each other rather than taking their grid positions. Here's a simple code example that would cause the problem: HTML <div class="grid"> <div>Top Left</div> <div>Top Right</div> <div>Bottom Left</div> <div>Bottom Right<

问题 I'm trying to work out whether CSS grid is capable of behaving like a table. So if I have a long piece of "cell data" (col 2) and there's space available elsewhere in the table, I don't want it to wrap as it does in the image below: What I want to achieve is something like this. Where the column with the longer piece of content grows and the other columns shrink based on the content in that column. I've uploaded an example here on CodePen: https://codepen.io/anon/pen/WdNJdY .wrapper { display

问题 body { margin: 0 auto; max-width: 60%; } textarea, input, select { width: 100%; /* extend the width of the grid item */ box-sizing: border-box; /* including padding / border in width */ } .wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr 30px; grid-template-rows: auto auto; /* changed */ border: solid 1px #000000; grid-gap: 10px; /* grid gap to handle spaces between items if needed */ padding: 5px; /* space between wrapper and grid items */ } .column1 { grid-column: 1/2; } .column2

问题 This question already has answers here : How to target a specific column or row in CSS Grid Layout? (6 answers) Closed 2 years ago . I have an indefinite amount of div elements (pieces of content / grid items). I want them to layout in a defined number of columns of CSS Grid. The CSS Grid lays them out like that easily. But now as the elements are in place I'd like to style the <div> s in every other row of the resultant grid in some way. Think of it as styling every other row of table to a

问题 I am using CSS grid to create a horizontal scroll for a list of card items. I am required to leave spacing at the first item of the list on the left, and the last item on the list on the right, when you have reached the end of the horizontal scroll. When scrolling through the middle of the list however, there should not be any spacing on the sides. Requirements Spacing on the start of the list of cards (on the left) Spacing at the end of the list of cards (on the right) The amount of cards

问题 Is it possible to shrink grid items just like flex items in css? Grid items .container { display: grid; grid-gap: 10px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } .child { display: flex; flex-flow: row wrap; align-items: center; justify-content: center; padding: 5px; border: 3px solid #a07; } <div class="container"> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div> <div class="child"> text </div

问题 Let's say I have a 3-column CSS-Grid. Is there a way, using JavaScript, to get the grid-row and grid-column of an auto-placed element? Example: console.log($('#test').css('grid-row'), $('#test').css('grid-column')); // expected output: 2 3 // actual output: two empty strings .grid { display: grid; grid-template-columns: repeat( 3, 1fr); } <div class="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div id="test"></div> <div></div> <div></div> <div></div> </div> Here is a