css-grid

问题 I am using CSS Grid and have made the following layout in the codepen found here: https://codepen.io/alexg2195/pen/xLEeMd My issue is that when using repeat(auto-fill, minmax(400px, 1fr)); I end up with a layout that goes beyond just two columns. Is there a way to force two columns but still have the same min auto fill resize behaviors? body { margin: 40px; } .layout { display: grid; grid-gap: 10px; grid-template-columns: 1fr 100px; grid-template-areas: "main btn" "main ."; } .btn { grid-area

问题 Is there a way to force all the items in the last row, of a grid, to fill the row, no matter how many they are? I do not know the number of items that will be in the grid so I cannot target them directly. I tried to use grid-auto-flow: dense , but it is not really helping. This is my question visualized: : div { margin:20px auto; width: 400px; background: #d8d8d8; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); } span { height: 50px; background: blue; } <div> <span><

问题 I have a problem with CSS grid. In the following snippet extracted from the codebase, I have a very simple HTML structure with grid layout. Content is set to break-word to prevent text from overflowing. Event though there is enough space for the text to NOT get broken, it does create a line break just before the last letter. My understanding was that in grid layout, by default, items are calculated to fit the content as much as possible, which is somehow not the case in this example. Removing

问题 I'm fiddling around with a CSS grid-based frontend and the following behaviour is required over and over and over again in different parts of the frontend: A grid with a variable number of rows. Every row should have a variable size (auto will do). The last row should always take up all the remaining space. So in the case I happen to need five rows, this does the trick: .myGridForFiveRows { display: grid; grid-template-rows: auto auto auto auto 1fr; } However, I'd really like a stylesheet

问题 I have a card built with CSS Grid layout. There might be an image to the left, some text to the right top and maybe a button or a link at the right bottom. In the code below, how can I make the green area take up as much space as possible and at the same time make the blue area take up as little space as possible? The green should push the blue area down as far as possible. https://jsfiddle.net/9nxpvs5m/ .grid { display: grid; grid-template-columns: 1fr 3fr; grid-template-areas: "one two"

问题 With a flex container and flex-wrap: wrap set you can align overflowing items to the center using justify-content: center . Is there a way to achieve the same behaviour for overflowing grid items using CSS grid? I've created a pen showing the desired flex behavior .container-flex { display: flex; flex-wrap: wrap; justify-content: center; } .container-flex .item { width: 33.33%; background: green; border: 1px solid; } .container-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

问题 I am working with the CSS grid. I thought that I could make one single grid item to a hyperlink, if I wrapped it in an a tag. But I can see that this solution is not working. The whole grid consist of around 30 grid elements made with the CSS grid. Building the grid up with flex boxes is therefore not a good solution. Does anybody have an idea on how I can turn the whole grid column into a hyperlink? .item2 { grid-row: 1 / 1; grid-column: 7/13; height: 340px; display: flex; justify-content:

问题 I would like to have container, that satisfies following conditions: it has 2 rows and unlimited amount of columns all items inside it are one-word text elements, that have their width all items inside it are equal width, defined by the widest element (longest word) I was thinking about using a flexbox. Since all of the items have known height (because they are one line of text), I can define wrappable container like this: display: flex; flex-flow: column wrap; height: 100px; All items inside

问题 I have the following css and markup <div class="wrapper"> <div class="content">Header</div> <div class="content">Sidebar</div> <div class="content">Content</div> <div class="content">Footer</div> </div> CSS .content { grid-area: main; } The items on the grid overlap on the grid area. I instead want the items to come one after another on the grid area. Is this possible? 来源： https://stackoverflow.com/questions/55528419/css-grid-grid-area-avoid-items-overlapping

问题 I'm new to CSS and i have been trying to construct a quite simple layout with CSS grid . I drew a sketch: So after reading the Great explanation in css-tricks, i started writing the code but for some reason the rows aren't laid correctly as i would expect (my code on codepen). grid-template-rows: 5em 50vh 100vh 30vh; grid-template-columns: 0.15% 0.3% 0.4 0.15%; grid-template-areas: "logo search-bar menu . " "description description description nav-bar" "main main main . " "footer footer