css-grid

问题 This question already has answers here : Can I make a CSS grid with dynamic number of rows or columns? (5 answers) Closed 14 days ago . I was wondering if there is a way to assign a dynamic number of rows and columns to a Grid layout without Javascript? Every example I've seen has also included some Javascript and as of now I'm working on a bare knowledge of only HTML and CSS (a student). What I am trying to achieve is that as I add content, I don't want to have to create new rows in my CSS.

问题 I have a CSS grid layout where I have the top row spanning the entire grid using the grid-column property. Does anyone know how I can set this row to be 100px high and have all the subsequent rows set to a grid-auto-rows height of 200px? I know I can input individual values with grid-template-rows for all the specific rows, but there are going to be a lot of divs on the page and don't want to input 100px and then a load of 200px values using this grid-template-rows property. I'm thinking

问题 I have a container div which has some padding, display: grid and overflow: auto set. When a child div 's height is bigger than the parent's one and a scroll bar appears, it scrolls so that there is no bottom padding. Here is a Fiddler. .container { background: red; display: grid; height: 300px; padding: 3em; overflow: auto; width: 300px; } .child { height: 500px; background: #000; } <div class="container"> <div class="child"></div> </div> However, if the container is made any other than

问题 When a grid has a fixed width and height, and a descendent of the grid has a width or height that is larger than that of the grid, the descendent forces the grid to 'grow' to fit it. In previous versions of Chrome (pre 80), and the latest version of Firefox (73.0 at the time of writing this) the descendants of the grid respected the grid's bounds. I've had a look the release log for this update and can't seem to find any mention of changes to grid or grid-template-rows/columns . Expected

问题 When a grid has a fixed width and height, and a descendent of the grid has a width or height that is larger than that of the grid, the descendent forces the grid to 'grow' to fit it. In previous versions of Chrome (pre 80), and the latest version of Firefox (73.0 at the time of writing this) the descendants of the grid respected the grid's bounds. I've had a look the release log for this update and can't seem to find any mention of changes to grid or grid-template-rows/columns . Expected

问题 This question already has answers here : Chrome 80 css grid large descendants cause grid to grow (3 answers) Closed 18 days ago . Is anyone aware what is up with the latest Chrome 80 update? Seems like grid-template-rows: auto started taking up some space from now even when a given row is not present in the markup. Happens on Chrome 80+ only. .l-page { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto minmax(1px, 1fr); /* // 1px is needed because of https:/

问题 This question already has answers here : Chrome 80 css grid large descendants cause grid to grow (3 answers) Closed 18 days ago . Is anyone aware what is up with the latest Chrome 80 update? Seems like grid-template-rows: auto started taking up some space from now even when a given row is not present in the markup. Happens on Chrome 80+ only. .l-page { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto minmax(1px, 1fr); /* // 1px is needed because of https:/

问题 I was wondering, if it's possible to use css grid in column mode and fill the cells in snake lines. Like this: 01 06 07 12 02 05 08 11 03 04 09 10 Any advice on this? Thanks for your help. 回答1: Here is an idea if we consider the fact that you will always have 3 rows: .container { display:grid; grid-template-rows:20px 20px 20px; grid-auto-columns:20px; grid-auto-flow:column dense; } .container > div:nth-child(6n + 4) { grid-row:3; } .container > div:nth-child(6n + 5) { grid-row:2; } /*

问题 NEW IMAGE HERE [IMAGE ONE][2] [IMAGE TWO][3] Hello! I am trying to make a blog post section as the one shown in Image One. It consists of a CSS Grid with four divs inside, each one is a cell that occupies 1fr of the wrapper element, has an img, a h6 and p elements inside as you can see in Image One. This is all put inside a Javascript Slideshow, meaning that each slide for the slideshow is made of CSS Grid. My problem/goal: I want to create an admin site in which to upload a new image and

问题 This question already has answers here : Aligning grid items across the entire row/column (like flex items can) (2 answers) Closed last month . I am using CSS Grids. I want to offset an element so that it horizontally moves across the grid columns. I also want this element to retain its current width, and apply the offset value in addition to the element's width. Example: .container { display: grid; grid-template-columns: repeat(4, 1fr); } .item { grid-column: span 1; background-color: orange