css-grid | 易学教程

Equal height rows in CSS Grid Layout

阅读更多关于 Equal height rows in CSS Grid Layout

问题 I gather that this is impossible to achieve using Flexbox, as each row can only be the minimal height required to fit its elements, but can this be achieved using the newer CSS Grid? To be clear, I want equal height for all elements in a grid across all rows, not just per each row. Basically, the highest \"cell\" should dictate the height of all cells, not just the cells in its row. 回答1: Short Answer If the goal is to create a grid with equal height rows, where the tallest cell in the grid

How to target a specific column or row in CSS Grid Layout?

阅读更多关于 How to target a specific column or row in CSS Grid Layout?

问题 Is it possible to select a specific grid column or row with CSS? For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; . How would I select all elements from the 2nd column? For example: grid:nth-child(column:2) (just my idea, not valid code). I have tried nth-child selectors on the div elements, but this does not allow me to specify row or column when the items are automatically placed by the Grid Layout engine. body {

Align child elements of different blocks

阅读更多关于 Align child elements of different blocks

问题 I have a list of wares. I need to show them in a 2-dimensional list. Every ware has daughter elements: photo, title, description, price and buy button, which must be sized and positioned in this way: all titles, description, price and photo in a wares row must be at the same y-coordinate position and have height which is maximum of corresponding height element in a row. Ive tried this: \"grid-template-rows: 1fr 1fr 1fr 1fr 30px;\" to make all daughter elements in a row be at the same y

Browser support for CSS Grid

阅读更多关于 Browser support for CSS Grid

问题 What\'s the browser support situation regarding CSS Grid? I\'m looking around and having hard time understanding the whole picture about compatibility. If I go to Can I Use, it seems almost all browsers support it. But if I go to Microsoft documentation, the situation changes a bit. It seems that almost all browsers support Grid but, except for Firefox, none of them support all the features. Then, regarding Edge, I got that it only supports an old specification no longer used and the updated

Positioning content of grid items in primary container (subgrid feature)

阅读更多关于 Positioning content of grid items in primary container (subgrid feature)

问题 All guides about CSS grid seem to imply a structure where the elements positioned in a grid are children of the grid itself. <div class=\"wrapper\"> <div>A</div> <div>B</div> </div> Where .wrapper has display: grid and a definition of the grid properties. Does it make any sense if I want to position a element that is a \"grandchild\" of the grid, on the grid itself (instead of relying on its parent ?) <div class=\"wrapper\"> <div>A</div> <div> <div>B</div> <div>C</div> </div> </div> Here, I

Equal width flex items even after they wrap

阅读更多关于 Equal width flex items even after they wrap

问题 Is it possible to make a pure CSS solution like this: Items have some min-width . They should grow dynamically to fill all container width and then wrap to new lines All items on the list should have equal width. This is how it looks now: And this is how I would like it too look like (I\'ve managed those bottom items\' width manually just to show the expected result): .container { display: flex; flex-wrap: wrap; } .item { background: yellow; min-width: 100px; height: 20px; text-align: center;

grid-template-areas with ASCII art is not working

阅读更多关于 grid-template-areas with ASCII art is not working

问题 When grid-template-areas: \"....... header header\" \"sidebar content content\"; is changed to: grid-template-areas: \"....... header header\" \"sidebar header content\"; Everything falls apart. How can I achieve the same effect with CSS Grid layout? body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid-template-areas: \"....... header

Last margin / padding collapsing in flexbox / grid layout

阅读更多关于 Last margin / padding collapsing in flexbox / grid layout

问题 I have a list of items that I\'m trying to arrange into a scrollable horizontal layout with flexbox. Each item in the container has a margin left and right, but the right margin of the last item is being collapsed. Is there a way to stop this happening, or a good workaround? ul { list-style-type: none; padding: 0; margin: 0; display: flex; height: 300px; overflow: auto; width: 600px; background: orange; } ul li { background: blue; color: #fff; padding: 90px; margin: 0 30px; white-space:

How to target a specific column or row in CSS Grid Layout?

阅读更多关于 How to target a specific column or row in CSS Grid Layout?

Is it possible to select a specific grid column or row with CSS? For example, say I have a 3 row by 2 column CSS Grid Layout: grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; . How would I select all elements from the 2nd column? For example: grid:nth-child(column:2) (just my idea, not valid code). I have tried nth-child selectors on the div elements, but this does not allow me to specify row or column when the items are automatically placed by the Grid Layout engine. body { display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr; grid-gap: 10px; } .item

Centering in CSS Grid

阅读更多关于 Centering in CSS Grid

问题 I\'m trying to create a simple page with CSS Grid. What I\'m failing to do is center the text from the HTML to the respective grid cells. I\'ve tried placing content in separate div s both inside and outside of the left_bg and right_bg selectors and playing with some of the CSS properties to no avail. How do I do this? html, body { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 100vh; grid-gap: 0px 0px; } .left_bg { display: subgrid;