css-grid

问题 I'm having issues with getting content inside a grid to alight correctly. I added a code snippet to show what I'm trying to do. The textWrapper content should always be at the bottom of its parent .item. I tried using align-content on the textWrapper align-content: flex-end; But it wont work for me. How can I get the gray textWrapper to be always at the bottom of Make sure your browser is sized down small so the white images wrap to next line. This way you will see that the right had side

问题 This is a development of this question with a crucial difference: elements to be distributed in two columns are of unequal heights. Please do not treat it as a duplicate. WHAT I WANT TO ACHIEVE: Given an unknown number of elements of roughly similar, but not identical height, the following should be achieved: On desktop layout: elements need to be distributed in two columns in the following manner: 1 2 3 4 5 6 etc top element in the right column should be offset from the top border of the

问题 The contactfields on my website are shrinking as soon as the user starts typing on a mobile device. I could not detect this behavior in a desktop browser window at any size. The contactfield is structured with the relativly new css grid . How to recreate the bug: Open my website on your mobile device Scroll down to the input field Focus one and start typing I already tried to fix it trough applying a width and min-width to the inputs but this did not fixed it. I gathered information in a

问题 Is it possible to make a grid item span from the first to the last row when I don't know the number of rows? Lets say I have the following html with an unknown number of boxes. How can I make the third .box span from the first grid-line to the last? .container { display: grid; grid-template-columns: repeat(3, minmax(10rem, 1fr)) [last-col] 35%; grid-template-rows: auto [last-line]; } .box { background-color: blue; padding: 20px; border: 1px solid red; } .box:nth-child(3) { background-color:

问题 I have set up a grid with two items. This grid can contain any number of items but two is enough for this example. Background In the example there are two gray boxes align to the left. Using an inspector on a wide screen (above 1000px) we can spot a third (or more) "shadow" item that fills up the rest of the space. Question How can I center the boxes in the grid? Like the "shadow" item(s) does not exist. On the .grid element I still want to use a grid because of the automatic media queries I

问题 Is there a way, without using media query , to limit the number of columns that get created, and combine that with auto-fit/fill? For example: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); Creates a wonderful, responsive layout. But imagine the design calls for a maximum of 3 columns -- even in wide browsers. It would happily show, 4, 5, more columns as space allows. Using media query, I could specify big screens get: grid-template-columns: 1fr 1fr 1fr; And smaller screens get:

问题 I am playing around with CSS grids. When I view it on a desktop size (min-width: 769px) I have a single row with 3 columns - something like this: --------------------------------------------- | col 1 | col 2 | col 3 | | | | | --------------------------------------------- Can I with css-grid move the columns around so I can do something like this on a mobile layout: --------------------------------------------- | col 1 | col 3 | | | | --------------------------------------------- | col 2 | ---

问题 I have a layout with an image on the left and some text content on the right. It is laid out something like this: .left { max-width: calc(100% - 150px); float: left; } img { width: 300px; max-width: 100%; } <div class="wrapper"> <div class="left"><img src="https://i.stack.imgur.com/W6Sd8.png" /></div> <div class="right">Hello, I am Kitteh</div> </div> The basic idea is that the image can be up to 300px but must always leave at least 150px for the text content to the right. The text content

问题 This question already has answers here : Equal width flex items even after they wrap (2 answers) Is it possible for flex items to align tightly to the items above them? (5 answers) Closed 2 years ago . I have read a few posts that say -Flexbox should be used for small scale layout and CSS grid should be used for large layout. e.g. Don't use flexbox for overall page layout - JakeArchibald.com Should I use Grid or Flexbox? - rachelandrew.co.uk Can anyone share a real-word example where one will

问题 There seems to be a strange bug in CSS grid for Chrome (doesn't happen in Firefox). It happens when using repeat(auto-fit, minmax(300px, 1fr)) for the grid-template-columns style. For some reason even though there are only two child divs, the parent div thinks there is a another element and generates a huge amount of whitespace and unnecessary grid gaps. Any idea how to legitimately fix this without making a janky fix? Here's a recreation of the bug: https://codepen.io/rantis/full/gXxxRB/