css-grid

Why is my Grid element's height not being calculated correctly?

由 依然范特西╮ 提交于 2019-11-26 17:33:57
问题 I'm having trouble with a CSS grid element's height. The code I am using is: .gridContainer { border: thin solid black; background: rgba(255, 0, 0, 0.5); display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100px; height: 100px; grid-template-areas: 'windowContentHolder'; } .gridItem { grid-area: windowContentHolder; background: rgba(255, 255, 0, 0.5); width: 200%; height: 200%; } .content { background: rgba(255, 0, 0, 0.5); } <div class="gridContainer"> <div class=

Make grid items fill columns not rows [duplicate]

由 回眸只為那壹抹淺笑 提交于 2019-11-26 17:21:25
问题 This question already has an answer here: Make grid container fill columns not rows 5 answers I want my grid to fill in vertically: 1 4 7 2 5 8 3 6 9 Instead of it fills in horizontally: 1 2 3 4 5 6 7 8 9 In my grid I want to specify the number of columns, not the number of rows. This is what my div looks: .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div

Unordered list that acts like grid-auto-flow dense

由 好久不见. 提交于 2019-11-26 17:20:04
问题 Is it possible to create an unordered list of different sized items that have the properties of grid-auto-flow: dense ? I currently have an unordered list of terms that fills my page from left and right and any term that can't fit gets pushed to the next line. However, this leaves gaps on the right side of the page which is not plesent for responsive designs (the list starts from the left). I looked at the flex-flow properties of flexbox, but I did not find anything that can mimic grid-auto

Flex / Grid properties are deleted in gmail email

由 时间秒杀一切 提交于 2019-11-26 17:13:46
问题 I have a script in PHP that sends the following HTML by mail : <html class="no-js" lang="en"> <body> <div style="width: 70%;background-color: #060b2b;margin: auto;flex-direction: column;display: flex;"> <h1 style="margin-top: 50px;color: white;margin-left: auto;margin-right: auto;">Vous avez reçu une nouvelle notification.</h1> <div style="width: 80%;padding: 50px;margin-top: 50px;background-color: #222;margin-left: auto;margin-right: auto;display: flex;"> <p style="color:white;margin: auto

Create a Masonry grid with flexbox (or other CSS)

由 倾然丶 夕夏残阳落幕 提交于 2019-11-26 15:30:26
I would like to achieve a grid effect in CSS with elements that all have the same width in size but not in height. I would like the element underneath to be always at 50px of the bottom one, whatever is next. I tried with floats, but that bug. So I tried with Flex, but it still does not do what I want. .container display: flex flex-wrap wrap align-content flex-start align-items flex-start What I would like: What I have: Try the new CSS Grid Layout : grid-container { display: grid; /* 1 */ grid-auto-rows: 50px; /* 2 */ grid-gap: 10px; /* 3 */ grid-template-columns: repeat(auto-fill, minmax(30%,

display grid and position fixed goes out of body

由 社会主义新天地 提交于 2019-11-26 14:56:33
问题 .parent { position:fixed; width:100%; left:0; top:14px; display:grid; grid-template-columns:40% 60%; grid-gap:5px; background:#eee; } .left { border:2px solid red; } .right { border:2px solid red; } <div class='parent'> <div class='left'>LEFT</div> <div class='right'>RIGHT</div> </div> if position is not fixed there is no problem, but if position is fixed - parent is not entire visible on the right side. 回答1: The issue isn't with width:100% like you think. It is with grid-template that you

Setting different lengths for grid gaps in CSS Grid

由 ∥☆過路亽．° 提交于 2019-11-26 14:36:29
问题 I'm creating a layout using CSS Grids, and I want to have different space between each row. I can create the layout fine by just using margin on each element, but this kind of obscures the simplicity of the code. Is there any grid tricks I can do achieve this, grid-row-gap only seems to take one value, which it uses for all rows. What I'm trying to achieve is a layout like this: https://jsfiddle.net/8swzgk0b/1/ .grid { display: grid; grid-template-columns: auto 25% 25%; grid-template-rows:

Equal height of elements inside grid item with CSS grid layout

由 丶灬走出姿态 提交于 2019-11-26 14:16:32
问题 I have a sequence of articles inside a div of 4+ length, without any rounding row tag. I need to represent it as a table of 3 articles (columns) per row, probably with display: grid . Every article has a header, a section and a footer. How would I implement an equal height for each header, an equal height for each section, and an equal height footer, aligned to the bottom of the article, inside each row of articles? Is it even possible? Should I use display: table ? PS I need to change the

Make flex items overlap

由 ぐ巨炮叔叔 提交于 2019-11-26 14:03:23
问题 I'd like to show a horizontal series of a unknown number of playing cards. To do this, they will have to overlap if there are too many. I'm having trouble convincing a flex box to overlap the cards without shrinking them. The example below shrinks the cards. I tried flex-shrink: 0 , but then max-width wasn't respected. .cards { display: flex; max-width: 300px; } .card { width: 50px; height: 90px; border: 1px solid black; border-radius: 3px; background-color: rgba(255, 0, 0, 0.4); } <div class

What is the difference between auto-fill and auto-fit?

由 ￣綄美尐妖づ 提交于 2019-11-26 12:48:27
问题 I\'m working with CSS grids to achieve a card grid layout. But I don\'t quite know how to tweak the minmax() statement to handle use cases where there aren\'t enough items to fill a row but still need them to look like cards! If I replace the max 1fr value with a static 100px or I use a fractional 0.25fr it upsets the scaling at smaller media sizes. .wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-column-gap: 17px; grid-row-gap: 25.5px; padding
订阅 css-grid