css-grid

问题 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've listed the div which has a fixed height like masonry. The code works in Firefox, but not in Chrome. The reference code I've referred is CSS-only masonry layout. Chrome Browser Mozila Firfox Browser .container { width: 1080px; margin: 0 auto; } .grid-container { display: grid; grid-auto-rows: 1px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .grid-item { display: flex; align-items: center; justify-content: center; border: 1px solid; font-size: 50px; margin: 5px; } .grid

问题 I'm experimenting with component driven front end frameworks, such as Angular, and finally learning CSS Grid. My question is : is it bad practice to nest CSS Grids ? What I've done here is in my main/root component, I've used css grid to make two things: the navbar and the main content area, since navbar will be present in the entire app and also the main content. As you can see below, the grid on the root level then another grid in the <nav-bar> component. And in the main content area, there

问题 This code uses CSS grid with minmax(30rem, 1fr) . grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); Everything works fine, but when the viewport parent container gets smaller than 30rem, a horizontal scrollbar appears. I would need something like minmax(min(30rem, 100%), 1fr)) . Any idea how to achieve that? https://codepen.io/anon/pen/LmEyer ul { list-style-type: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr)); grid-auto-rows: 1fr;

问题 This question already has answers here : Aligning grid items across the entire row/column (like flex items can) (2 answers) What are the areas covered by Flexbox which are difficult or impossible to achieve with Grid? (3 answers) Closed 9 months ago . I've started to learn grid system (display:grid) and I have the following code, but I don't know how to center last two columns (4 and 5) without add more columns in grid-template-columns and use grid-column-start and grid-column-end in the

问题 Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid? #grid-container { width: 100%; height: 85%; position: relative; padding: var(--gap); /* adjusted with JS to make var(--gap) responsive */ display: grid; grid-gap: var(--gap); /* adjusted with JS to make var(--gap) responsive */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); box-sizing: border-box; background:

问题 Although I have not yet been able to find an answer, the question is simple: Is there a way, other than brute force, to count the number of columns in a responsive grid? #grid-container { width: 100%; height: 85%; position: relative; padding: var(--gap); /* adjusted with JS to make var(--gap) responsive */ display: grid; grid-gap: var(--gap); /* adjusted with JS to make var(--gap) responsive */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); box-sizing: border-box; background:

问题 I have a problem with a css grid layout. The grid container is absolutely positioned and the grid-template-rows contains an 1fr to allow one row to take all the free space. This displays correctly on all current browsers except the latest Safari installed with macOS 10.13.2 The issue seems to be caused by it not calculating the freespace if the height is not explicitly set. Am I missing something or is there a workaround? jsfiddle example html, body { height: 100%; margin: 0; padding: 0; }

问题 I need to implement a fairly run-off-the-mill masonry layout. However, for a number of reasons I don't want to use JavaScript to do it. Parameters: All elements have the same width Elements have a height that cannot be calculated server side (an image plus various amounts of text) I can live with a fixed number of columns if I have to there is a trivial solution to this that works in modern browsers, the column-count property. The problem with that solution is that elements are ordered in

问题 I have 5 boxes: three on the first row, the next two on the second row: I want all the boxes but the second to be of equal height and the 5 th box to go right under the 3 th . I tried this with flexbox and I am now trying it with display: grid . I am looking for a CSS only solution, if possible. .grid-container { display: grid; grid-template-columns: auto auto auto; grid-auto-rows: min-content; grid-gap: 0; background-color: #2196F3; } .grid-container > div { background-color: rgba(255, 255,