css-grid

Issue with grid layout in IE11

由 孤人 提交于 2021-01-28 12:39:00
问题 I'm trying to create a 3cols*2rows layout using css. it works as expected in chrome but it's not working fine in ie11. can you please suggest how can i achieve it. i think the problem is with grid gap since the grid gap is not working in IE, i've tried gap, grid-row-gap but i've no luck my code looks as follows: .grid_container { width: 65%; margin: 10px auto; display: grid; grid-gap: 1.5rem; grid-template-columns: 1fr 1fr 1fr; max-width: 1100px; display: -ms-grid; -ms-grid-columns: 1fr 1fr

vertical align and CSS grid relationship

由 情到浓时终转凉″ 提交于 2021-01-28 10:50:31
问题 How do vertical align and CSS grid work together? I have an element that is next to elements that need to be aligned exactly in the middle. See below: .alphabet { font-size: 80px; /*Below is not working...why?*/ vertical-align: middle; } .letter-grid { display: flex; } .filter-item-grid { display: grid; display: -ms-grid; grid-template-columns: auto auto; justify-content: space-between; align-content: space-between; } .letter-grid__filter-item { display: grid; display: -ms-grid; grid-template

CSS grids and text-overflow: ellipsis [duplicate]

由 馋奶兔 提交于 2021-01-28 06:28:38
问题 This question already has answers here : Prevent content from expanding grid items (3 answers) Closed 1 year ago . When using a CSS Grid, I can't seem to manage to make the text-overflow:ellipsis work, even though I am applying it to the dom object containing the text that I want to shorten. .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; .grid-item { border: 1px solid red;} .grid-item .content{ background-color: lightgray; } &.with-ellipsis { .title { text-overflow:

CSS Grid - 2x2 grid always taking up the full width when possible

由 我的未来我决定 提交于 2021-01-28 05:43:27
问题 I'm trying to create a 2x2 CSS grid (possibly extended to 3x2 in the future) that only pushes items onto the first row when there are three children in the grid, and I'm not sure if this is possible with grid. The scenarios based on the number of items would be: 2 Items (Minimum) <div class="grid"> <div class="player">Player 1</div> <div class="player">Player 2</div> </div> 2 Player Grid 3 Items <div class="grid"> <div class="player">Player 1</div> <div class="player">Player 2</div> <div

How to make the last items in my CSS grid stretch full width with equal spacing?

由 南笙酒味 提交于 2021-01-28 05:40:19
问题 I am new to using CSS grid and have stumbled across a problem that I can't find an answer online. What I am trying to achieve is a 7 column layout, and the remaining items to stretch in width equally to fill up the remaining space. I have attempted to use auto-fill & auto-fit as I found online, but this didn't tackle my problem. I am not sure if this can be achieved in CSS grid and I may have to use flexbox? I would like "Eight", "Nine" and "Ten" to stretch full width to be inline with the

CSS Grid Firefox vs Chrome difference with grid-template-columns [duplicate]

由 萝らか妹 提交于 2021-01-28 04:29:38
问题 This question already has answers here : Flex / Grid layouts not working on button or fieldset elements (3 answers) Closed 7 months ago . The following snippet was designed for use in Firefox (79.0a1 from 2020-06-24), where the CSS grid is behaving as I expected (label and input on the same row, submit spanning the width of the fieldset). In Chrome (83.0.4103.116), the label and input go on different rows and the submit button is as narrow as its value allows. <!DOCTYPE html> <html lang="en">

Irregular gallery in react [closed]

由 匆匆过客 提交于 2021-01-20 14:02:56
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 8 days ago . Improve this question I have this layout of gallery I also have array of images:[image1, image2, image3 etc] The number of images is not static. It can be 20, 30 or any other number. I'm trying to map my array and render those images, the problem is, how to make them look like on

Irregular gallery in react [closed]

由 我与影子孤独终老i 提交于 2021-01-20 14:00:24
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 8 days ago . Improve this question I have this layout of gallery I also have array of images:[image1, image2, image3 etc] The number of images is not static. It can be 20, 30 or any other number. I'm trying to map my array and render those images, the problem is, how to make them look like on

Irregular gallery in react [closed]

由 流过昼夜 提交于 2021-01-20 13:58:17
问题 Closed . This question needs to be more focused. It is not currently accepting answers. Want to improve this question? Update the question so it focuses on one problem only by editing this post. Closed 8 days ago . Improve this question I have this layout of gallery I also have array of images:[image1, image2, image3 etc] The number of images is not static. It can be 20, 30 or any other number. I'm trying to map my array and render those images, the problem is, how to make them look like on

Prevent div growing/stretching when creating a dynamic grid

由 大憨熊 提交于 2021-01-07 03:08:57
问题 I am working on a dynamic image grid, and I cannot get the grid to stay in a container. The idea is rather simple, add as many boxes to the container as I like, using jQuery, and as they are added, shrink them to fit the container without adding scroll bars, or running off the screen. This is working with adding columns but when adding rows it just keep running off the bottom of the screen. How do I fix the container div so as rows are added, the image shrinks instead of adding rows with
订阅 css-grid