css-grid

问题 I have the following HTML/CSS .main { display: grid; grid-template-columns: 2fr 1fr; } /* The following is not essential - for decoration purposes only */ .left { background-color: green; } .right { background-color: orange; } <div class="main"> <div class="left">Left</div> <div class="right">Right</div> </div> Now, sometimes, and depending on the div with class main , sometimes I do not have the div with the class right (in other words, the html might look like this .main { display: grid;

问题 I have to place 7 div s (images) in two rows, 3 in 1st row and 4 in 2nd row. Top 3 div s should be centered and bottom 4 can take all space. Here is what I did: .content { display: grid; grid-gap: 10px; grid-template-columns: 1fr repeat(3, 170px) 1fr; grid-template-areas: ". item1 item2 item3 ." "item4 item5 item6 item7"; grid-template-rows: 1fr 1fr; } .content .box { width: 170px; height: 170px; border: solid 1px #000; } .content.box:nth-child(1) { grid-area: box1; } .content.box:nth-child(2

问题 I want to have a responsive grid of elements of variable length. The grid should fill the available width of the containing element, with the number of columns varying depending on the width of the container. This is straightforward to achieve using CSS grids; however, I don't know how to add a vertical border between columns (i.e., only in the interior column gaps). The below simple demo manages to achieve a vertical border in the event that there are three columns: https://codepen.io

问题 I'm trying to vertically align variable height elements across containers, i.e. the 1st element in each container aligns vertically with each other, the 2nd element in each container aligns vertically with each other, etc., etc. I'm using flexbox but not sure if this is even possible? Or is it possible using CSS Grid? Desired outcome See demo where I haven't managed to get it working yet. main { display: flex; flex-wrap: wrap; } .container { background: grey; margin: 0 10px 20px; padding:

问题 I've been studying css grid system from MDN. In the line based placement section, after playing around a bit I saw a weird behaviour. If the layout is two column, say e.g. defined as grid-template-columns: 1fr 3fr; and to one of the children I set the grid-column-end greater than 2, it generates empty columns with their own grid-gap . Here's a working example of it https://jsfiddle.net/u1paezkw/ If you inspect the header you'll notice straight dotted lines representing empty columns. body {

问题 I'm trying to make a grid that has a full span row at the bottom. For full span columns I can use grid-column: 1/-1 . For single span columns I can use grid-column: 1/1 . For single span rows I can use grid-row: 1/1 . But if I want to define the last column or row, I have to write grid-column: -2/-1 . Why is the syntax not the same as with 1/1 for the first column/row? Or am I making a mistake somewhere? I also made a jsfiddle to demonstrate my problem: jsfiddle .grid-container { display:

问题 I'm trying to make a layout like the picture below but I don't know how to specify the column to make it be like a part of it 3/4 the column and the other part is 1/4, I'm trying to use flexbox This what I want the layout looks like: I don't know how to make what I'm saying up there :D as am still new to flexbox. but down below my attempt to create this thing, but i couldn't make the first column consists of two unequal rows. .container { display: grid; width: 100%; height: 45vw; margin: auto

问题 I'm trying to make a layout like the picture below but I don't know how to specify the column to make it be like a part of it 3/4 the column and the other part is 1/4, I'm trying to use flexbox This what I want the layout looks like: I don't know how to make what I'm saying up there :D as am still new to flexbox. but down below my attempt to create this thing, but i couldn't make the first column consists of two unequal rows. .container { display: grid; width: 100%; height: 45vw; margin: auto

问题 I'm trying to make a layout like the picture below but I don't know how to specify the column to make it be like a part of it 3/4 the column and the other part is 1/4, I'm trying to use flexbox This what I want the layout looks like: I don't know how to make what I'm saying up there :D as am still new to flexbox. but down below my attempt to create this thing, but i couldn't make the first column consists of two unequal rows. .container { display: grid; width: 100%; height: 45vw; margin: auto

问题 I'm experimenting with css grid and i'm trying to make a simple example, but it does not seem to work on IE11 although i use the appropriate syntax: .grid { background: gold; height: 90vh; display: -ms-grid; display: grid; grid-gap: 20px; -ms-grid-columns: 405px 1fr; grid-template-columns: 405px 1fr; grid-template-rows: 1fr; -ms-grid-rows: 1fr; } section { background: red; } <div class="grid"> <section> section1 </section> <section> section2 </section> </div> 回答1: Apparently you need to