css-grid

问题 How can I get a left-sided gap? As you can see the Box1 is sitting 'sticky' to the left side I've used grid-gap: 1em; but it only applies to top bottom and right? /*Defining the font and pixels so we can work with em later*/ body { font-family: 'Poppins', sans-serif; font-size: 25px; } /*BG gradient layer + bg elements*/ .BG_gradient { background-image: linear-gradient(-135deg, #FEE140 0%, #FA709A 100%); /*Padding = 10vh top + 10vh bottom = 20vh*/ padding: 10vh 5vh 10vh 5vh; /*Padding top and

问题 How do I achieve this layout drawn on the picture? E.g. 3 items on left side, one centered, 2 on the right. the ul is the orangish color and the black boxes are the items ul { display: flex; width: 100%; } <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> </ul> 回答1: Flexbox Use 7 items. One in the center. Each side has 3. Hide one on the right with visibility: hidden . If you don't want to add a fake item in the DOM, then use a pseudo-element

问题 This question already has answers here : Centering in CSS Grid (7 answers) Closed 2 years ago . I have come across this problem recently. Lets suppose I have a simple <h1> tag and I want to center it vertically, so even when I re-size the window, it will remain in the middle of one of my grid box rows, neglecting its horizontal position. I know that when it comes to grid containers, vertical-align has no effect. So what would be the solution? This question has been marked as a duplicate,

问题 I'm creating a form that has required fields. To mark these as required, I'm putting an asterisk (*) as a ::before element and floating it right so it is by the top right hand corner of the field. The issue I'm having is a few of these fields are positioned with CSS Grids and when I add a ::before element to the grid, it is treated as another grid item and pushes everything over to a new grid row. Why is CSS grids treating the ::before element as another grid item? How would I make the

问题 I'm trying to figure out how I could use CSS grid for some asymmetric layouts like this: <h3>Two-Fifths - Three-Fifths</h3> <div class="cols"> <div class="two-fifths"> <p>This is an example of a WordPress post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> </div> <div class="three-fifths"> <p>This is an example of a WordPress

问题 I have built a tab in flexbox with :target which shows .details div when it is clicked. Unfortunately the .details div is very high and has a huge gap at the bottom of the paragraph. Is there a solution in CSS to remove this gap? Demo: https://jsfiddle.net/ocgjrzre/ p { margin: 10px; } body { display: flex; flex-wrap: wrap; } .my-wrap { // height: 200px; width: 90%; margin: 50px auto; display: flex; flex-direction: column; flex-wrap: wrap; align-content: space-between; border: 1px solid #eee;

问题 I am trying to make a simple sidebar layout with a flat HTML structure, in which the first <aside> element fills in the 1st column completely. My problem is, that the negative row end value seems to not work for the implicitly created rows for all my elements in the 2nd column. Expected: Actual: Below is a runnable code snippet that illustrates the problem. article { display: grid; grid-template-columns: 200px 1fr; background: gray; } aside { grid-row: 1/-1; grid-column: 1/2; background: pink

问题 Ok, here's the situation, let's say I have a list with unknown number of items, it could be 10 or a 100, and I want to lay them out in 3 columns going top to bottom not left to right. Right now I can achieve this using columns: 3; and column-gap: 10px; That's all fine and everything. My question is, how to achieve the same results using display: grid; without knowing the number of items? I know you can achieve this with CSS Grid if you have a fixed number of items, but is it possible with

问题 I try setting up a CSS grid layout as follows .wrapper { width: 800px; display: grid; grid-template-columns: repeat(3, 200px); grid-template-rows: repeat(5, 200px); } Is it possible to locate grid-template-columns in JS then re-size the columns? I came across a situation where I could find it (lost the code) but when I tried changing it, Chrome DevTools say the value is computed and cannot be changed. Any help pointing me in the right direction (or other ways to do it, but use of grid is a

问题 I'm experimenting with CSS Grids, and this is the layout I'm building: .grid { display: grid; align-items: center; grid-template-columns: 1fr 4rem 1fr; grid-template-rows: 1rem 1fr 1rem; max-width: 900px; margin: 0 auto; } .text { /* // Ideally, this should be grid-area: text */ grid-column: 1 / 3; grid-row: 2 / 3; /* Fix z-index */ position: relative; padding: 4rem; background-color: #fff; } .image { /* // Ideally, this should be grid-area: image; */ grid-column: 2 / 4; grid-row: 1 / -1;