css-grid

问题 I have a CSS grid layout with a bunch of areas and a photo container. I don't know how to: control the size of the photo, so that it is contained within the area of the grid keep the width of the photo at 100% (thus equal to its container) and scale the height of the container to fit the photo. Basically, when the window becomes smaller, the width of the photo becomes smaller, and so does the height - pulling the tag, album, and rotate elements up. .container { display: grid; grid-template

问题 I have a grid where I want it to work somewhat like it is except when there are only 1 or 2 cells I want it to auto size and not be a set of 3 with the last one holding its cell space. When I set repeat(3, 100px) value to auto-fit then it kills the column layout. I still need it to wrap at 3. .parent { background: #f4f4f5; font-size:2em; border: 1px solid black; padding: 20px 0; text-align: center; width: 100%; } .parent .wrapper { display: inline-grid; grid-template-columns: repeat(3, 100px)

问题 So I am defining a layout in CSS Grid which needs this particular row to have identically sized inputs. I can do the math and just specify percentages and it works fine (see commented out line) but when I specify it via the fractional unit (fr) then the spanned column "squishes" more than the non-spanned columns. .A { grid-area: a; } .B { grid-area: b; } .C { grid-area: c; } .Exchange_Row { display: grid; grid-template-columns: 1fr 9fr 10fr 10fr 1fr; /* grid-template-columns: 3% 27% 30% 30% 3

问题 I have a CSS grid with a bunch of auto-flowed grid items. Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I do not know from the source order which items will be in certain positions in the grid . This means that styling with :nth-child() will not be reliable. I would like to add styling to items in certain grid columns, (mostly the last column). Is there a CSS selector that will let me style these items? For example, in this demo, how would I style boxes

问题 So I have a simple stack of three paragraphs on mobile that I want to style in a grid on larger viewports, without changing the source order. The first section might have anything from several lines to no content at all. In this case, how do I make the first row collapse so the second row fills the space? IE when the top section is empty, the last section should appear at the top .grid { display: grid; grid-template-rows: min-content auto; grid-template-columns: 60% 40%; grid-template-areas:

问题 I have 4 columns. The actual content for columns 1 and 4 is 150px, column 2 is 250px and column 3 is 370px. I want to wrap the columns when the browser width changes. When I decrease the width of the browser, I want each column to shrink down to their lowest width before wrapping. So I imagine the 4th column would fall to the next row with a 100% width after it fell below 150px width. Here's what I thought should've done the trick: repeat(auto-fit, minmax(max-content, 1fr)) Is there a way to

问题 I generate a table (with vue.js) from an object which is supposed to be two columns wide. Each of the columns comes from the key and value of the object. This is equivalent to the following actual HTML: <div id="table"> <div> <div> this is something long on the first row </div> <div> short 1st row </div> </div> <div> <div> wazaa 2nd row </div> <div> wazii 2nd row </div> </div> </div> I use CSS grid to format these div into a 2x2 grid, which I expected to be this is something long on the first

问题 I'm trying to create some kind of universal component of flex-container. This component consists of container and its children in a row. If there are too much children in a line, those who don't have enough space go to second line. It can be easily achieved with flexbox, but also I want to be able to set gutter between elements. And first and last elements of a line shouldn't have left and right margin repectively. I do this using negative margin technique, but the problem here is that right

问题 I'm trying to create a simple css grid using the native CSS Grid properties. It works as I wanted, except I want to create a utility class that can center a column in a grid. Is there a way to create the __centered utility class, so that I can apply it to center columns? I know I could add empty column divs before the column, but I want a cleaner solution. .l-wrap { width: 100%; max-width: 1196px; margin: 0 auto; } .l-grid { display: grid; grid-gap: 52px; grid-template-columns: repeat(6, 1fr)

问题 I am creating a simple form, where I want to have this kind of layout So far so good, very simple 2 columns with a nested 2 columns, all of them defined with 0.5fr which should be the half of "free-space" if I understood correctly. But, if I try to reduce the screen, this happens. even if I have NO media queries. if you debug with chrome devtools you can see it's creating a 3rd column from nowhere without any element. Any idea? https://stackblitz.com/edit/js-zzm4gy?file=index.html h1, h2 {