css-grid

Filling empty cells in CSS Grid Layout

由 我只是一个虾纸丫 提交于 2019-12-22 09:06:19
问题 I have a set of div tiles that I've arranged through the CSS Grid Layout as "automatically" as possible; my final idea is that even if I don't know how many tiles there are, they all get sized and placed correctly. This is working fine. Now, I'm looking to double the area of any tile that is clicked on. As far as I know, that means increasing the span of this tile: grid-row: span 2; grid-column: span 2; I'm happy with the results if I click on any tile that is not in the right-most column.

How to add background-color when using css grid?

由 走远了吗. 提交于 2019-12-22 08:42:04
问题 When I add this code: place-items: center; Only the background color of the text is changing. When I remove this code: place-items: center; The color of the whole column is changing. main { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px; grid-gap: 20px; place-items: center; } p { background-color: #eee; } <body> <main> <p>box1</p> <p>box2</p> <p>box3</p> <p>box4</p> </main> </body> Why is this happening? 回答1: Without place-items: center; your grid itmes will

How to add background-color when using css grid?

由 风格不统一 提交于 2019-12-22 08:40:06
问题 When I add this code: place-items: center; Only the background color of the text is changing. When I remove this code: place-items: center; The color of the whole column is changing. main { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 100px; grid-gap: 20px; place-items: center; } p { background-color: #eee; } <body> <main> <p>box1</p> <p>box2</p> <p>box3</p> <p>box4</p> </main> </body> Why is this happening? 回答1: Without place-items: center; your grid itmes will

How can I make an input element respect the dimensions of a grid container?

由 白昼怎懂夜的黑 提交于 2019-12-22 08:38:04
问题 I have an input element, inside a CSS grid container. The container should be 100 pixels wide, with the input element taking up most of the space, and an other-thing taking up the remaining 24px. I am using grid-template-columns for this. This works fine if I make the parent container 200px instead of 100px: .container { grid-template-columns: 1fr 24px; grid-template-rows: 1fr; display: grid; justify-content: center; align-items: center; width: 200px; /* Try 100px */ background-color: red; }

CSS Grid layout max-content does not work as expected in Firefox

由 本小妞迷上赌 提交于 2019-12-22 08:19:01
问题 I used CSS Grid layout to create a basic layout for a page, and I worked originally in Chrome while doing that. I tested this now also in Firefox and noticed some behaviour that I don't understand and that doesn't seem to follow the specification as I understand it. I created a simplified example that shows the behaviour. The problem is the height of the search-header div. This is set to max-content and should be just as large as needed to fit the contained element. This works as expected in

CSS Grid: Is it possible to apply color to grid gaps?

由 点点圈 提交于 2019-12-22 01:32:46
问题 Is there a way to style more than just the width of the grid gaps within the CSS grid layout module? I can't find anything about it in the documentation, however one would tend to think that it would be possible as grid gaps tend to be colored in many designs. If it is not possible, is there a workaround? 回答1: Sadly, there is currently no way in the CSS Grid spec to style grid-gap . I came up with a solution that works well though that involves just html and css: show border grid lines only

Vertical align inside CSS grid

由 邮差的信 提交于 2019-12-21 17:25:05
问题 I would like to have a giant progressbar which is vertically aligned inside a CSS grid. The problem is, vertical alignment inside CSS grid is not working for me. I tried on Firefox, and also on Chrome. I tried vertical-align: middle , but it is not working. I have put a Flexbox inside the grid item, but still it is not working. Here is my minimal example: .wrapper { display: grid; border-style: solid; border-color: red; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr)

Equal height different aspect ratio boxes with CSS grid

由 醉酒当歌 提交于 2019-12-21 16:59:11
问题 I'm trying to create layout like this: Orange blocks on the right side all have the same aspect ratio and thus height. Blue block has different aspect ratio. Height of blue block and summ of orange blocks should be equal, as shown on the image. Is there a way to create such layout via CSS grid? I know that I can wrap orange items in a separate column element, but I'd like to avoid this. I also managed to create this layout when aspect ratio of each item is square, but no luck with this one...

Horizontal border across entire row of CSS GRID

由 若如初见. 提交于 2019-12-19 19:07:19
问题 I need to use a grid layout but also need a horizontal line separating each row. The only thing I've been able to find is applying a border to each cell, but this only works if there are enough cells to fill each row. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .box { border-bottom: 2px solid #ffa94d; padding: 1em; } <div class="wrapper"> <div class="box">One</div> <div class="box">Two</div> <div class="box">Three</div> <div class=

Chrome / Firefox percentage height differences in CSS Grid

由 不羁岁月 提交于 2019-12-19 09:53:55
问题 Please note, the following problem can be solved by using fr units instead of % and auto, but I am looking for an explanation as to why the problem occurs in the first place. In my code below, Firefox : Does not obey the values for grid-template-rows . Applies an equal height to each row but the grid items do not overflow the container. Chrome : Seems to obey the grid-template-rows property but the grid items overflow the container. Initially I thought the issue was with % but it is an
订阅 css-grid