css-grid

问题 I'm trying to build myself a flexbox with the following design: My html looks like this (and I would like to NOT change this): <div class="wrapper"> <div class="page-header">Heading</div> <h3 class="right_1">right_1</h3> <div class="right_2">right_2</div> <div class="left">form element</div> <h3 class="right_3">right_3</h3> <div class="right_4">right_4</div> </div> This is the standard layout of the joomla contact page. I want to change the design though without altering html/php code. Is

问题 I am designing a simple two-column layout with CSS Grid; the grid areas are named Cell1 and Cell2. In the left column (Cell1) I want a list of hyperlinks; when a hyperlink is clicked, I want the content to open in the right column (Cell2). I think I could use bookmarks to content already loaded into Cell2, but I prefer a way to display content in the right cell when a link is clicked, without using bookmarks. Using a CSS Grid layout, is there any way to designate a cell where content should

问题 Closed. This question is off-topic. It is not currently accepting answers. Want to improve this question? Update the question so it's on-topic for Stack Overflow. Closed 10 months ago . Using CSS Grid layout how can I safely hide a row without grid-template-rows layout properties getting passed over to the next row? I tried display: none; but the layout of the hidden element is passed over to the next element. Here's a code example: http://plnkr.co/edit/E3kuJcDxKnrjjbdVHQbO?p=preview. What I

问题 My content is overlapping. I understand it is because I put the same col-start , but how do I get the content divs to go grow and go down the middle of my css-grid? Should I be using flexbox with the grid here? (no Bootstrap please) Here is what it looks like now: .mygrid { display: grid; grid-template-columns: repeat(12, [col-start] 1fr); grid-gap: 20px; border: 5px solid red; } .content { grid-column: col-start 4 / span 7; grid-row: 1 / 3; } <div class="mygrid"> <div class="content">test1<

问题 Related partially to Remove empty space in CSS Grid, but with a few changes I am trying to achieve. I basically want my rows and columns to be able to grow and shrink according to the amount of content there is. If you look at this example on CodePen you can see that the content of the blue div overflows into the pink footer. It should really push the footer down. Same applies if the red section had a lot content. Also the top green section should too increase in height dynamically. And if

问题 Using the following css: .container { display : grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: 'first second' 'first second' ; } .first { grid-area: first; width: 200px; height: 200px; background-color: red; } .second { grid-area: second; width: 200px; height: 200px; background-color: #0eb5d6; These boxes will stack (appearing as one red, 1 blue): <div class="container"> <div class="first"></div> <div class="second"></div> <div class="first"></div>

问题 I have a grid layout of, let's say 2 rows, 2 columns in the 1st row, 3 columns in the 2nd row. And a grid gap of 10px between them. It is no problem to give every single grid a background-image. But what if I want them all to have the same background image that starts at the top left grid and continues/is spanned until the bottom right grid. One big background-image over all grids, just separated by the white grid gaps. html, body { height: 100%; } .grid { display: grid; height: 100%; grid

问题 As concluded here, CSS Grid implement equal height elements across rows by using grid-auto-rows: 1fr . However, Chrome and Firefox manifest different behaviours when inserting rows with a height set to auto between the equal height rows. That is, Chrome achieves equal height across rows when using the explicit grid-auto-rows: auto 1fr 1fr 1fr syntax but only equal height on a per row basis when using repeat like grid-auto-rows: auto repeat(3, 1fr); while Firefox only achieves equal height on

问题 The following is obviously a rookie CSS grid question, but how can one create a fixed header and footer in CSS grid and then create a scrollable main content area that has dynamically generated <section> elements each holding a fixed number other content elements? I have a pen here which is a fork of a Medium post and a pen from here. The problem I'm trying to solve is a bit more complicated than the usual CSS grid posts I could find in Internet -- sufficiently so to someone with very little

问题 I'm aware of the new minmax() function that allows specification of minimum and maximum width for a grid column. When using this function, however, I'm unclear what the "default" width of the column would be, and how to specify it. Outside of a grid - including in flex layouts - it's possible to specify something like this: .container { width: 25%; min-width: 200px; max-width: 400px; } effectively creating a container that would by default occupy 25% of its parent's width, but never shrink