css-grid

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); box-shadow: 1px 0px 5px 0px rgba(0,0,0,0.75); grid-auto-flow: row; background-color: white; } .cell {

I'm starting to work with CSS Grid, I've been reading about the properties to help with responsiveness; so I'm trying to build a small grid with 6 elements; my intention is for them to show as 2 rows on larger devices like this: And also to show them all stacked on smaller devices,so everything is good regarding the smaller devices, I'm using auto-fill so it stays responsive, however if I the view the page on a laptop screen or desktop it is able to fill one more column and ends up looking like this: This is my grid layout code. display: grid; grid-template-columns: repeat(auto-fill, 260px);

The snippet below uses CSS Grid to increase the number of columns for wide containers. For narrow containers (e.g. uncomment width: 80vw or resize the example), it adds implicit rows (only 2 are explicit in the grid-template-rows property). How can I maintain only 2 rows, making the grid items that "overflow" the 2-by-n grid hidden? .wrapper { border: 2px solid #f76707; background-color: #fff4e6; display: grid; /* width: 80vw; */ grid-template-columns: repeat(auto-fill, 200px); grid-template-rows: repeat(2, 1fr); } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background

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%; */ grid-template-areas: "a a b c ." } input[type=text] { border: solid; } <div style="width: 90%;

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: "main first" "main last"; } .first { grid-area: first; } .main { grid-area: main; } .last { grid-area:

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 3, 5, and 9, ( codepen here )? .grid-container { display:grid; grid-template-columns: 1fr 1fr 1fr; grid

The goal is to align square cells with their container's leading and trailing edges while achieving a consistent gap between cells on each row, and between each row. This Codepen is close, but there are two problems: (1) vertical gaps are different from horizontal gaps; and (2) the squares are flush with the leading edge, but not the trailing edge. https://codepen.io/anon/pen/wREmjo ul { display: grid; width: 260px; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); grid-auto-rows: 1fr; grid-gap: 10px; list-style-type: none; border: 2px solid black; box-sizing: border-box; margin: 0;

Chrome gives an invalid property value and doesn't respect the CSS: grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); It also fails when auto is replaced with min-content and max-content . It works as expected when auto is replaced by a fixed value e.g. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); This is surprising because both repeat and minmax support the keywords. The html is simple <div class='wrapper> <div>...</div> <div>...</div> </div> and css .wrapper { display: grid grid-template-columns: repeat(auto-fill, minmax(auto, 1fr)); } When using auto-fill or auto