css-grid

Calc() outputting unexpected value

由 给你一囗甜甜゛ 提交于 2019-12-02 09:09:44
问题 What I would like to do is make the #grid height 160% of the #grid width via calc(var(--grid-item-width) * 1.6) , but it appears that --grid-item-width is being treated as a percentage of the viewport width instead of a pixel value. The height of #grid is much larger than 160% of its width as can be seen in the screenshot below. :root { --gap: 26px; --grid-item-width: calc(100% - calc(var(--gap) * 4)); } #grid { width: 100%; height: var(--grid-item-width); /* does not match */ overflow-x:

How to use overflow hidden on 1fr grid element

由 北战南征 提交于 2019-12-02 07:20:56
问题 So I have this basic setup - a canvas area and an animator in a parent grid. The parent grid is also inside another grid with one 1fr row. I can resize the animator by dragging a resizer up and down. canvas { background-color: blue; } #grid1 { grid-template-rows: 1fr; } #grid2 { background-color: black; display: grid; grid-template-rows: 1fr auto; overflow: hidden; } #canvas-area { grid-row: 1; background-color: red; } #animator { grid-row: 2; height: 200px; } <div id="grid1"> <div id="grid2"

Remove a pseudo-element when there is only one child element

由 不打扰是莪最后的温柔 提交于 2019-12-02 07:09:23
问题 I use an invisible pseudo-element ( ::after ) that occupies the last slot in the container. But if there is only one element, I'd like to position it in the center. So in order to do it I need to "remove" the pseudo-element in that case. How do I do it if it's possible? .main { background: #999; margin: 0 auto; width: 500px; display: flex; flex-wrap: wrap; justify-content: space-between; } .box { background: #7ab9d7; color: #555; height: 30px; width: 30%; margin-bottom: 30px; text-align:

Remove empty space in CSS Grid

由 陌路散爱 提交于 2019-12-02 07:08:08
I have the following layout: .grid { display: grid; grid-template-columns: 645px 316px; grid-gap: 20px; } .top { grid-column: 1 / 2; grid-row: 1; background-color: green; } .right { grid-column: 2; grid-row: 1 / span 2; background-color: blue; } .bottom { grid-column: 1; grid-row: 2; background-color: red; } <div class="grid"> <div class="top">top</div> <div class="right"> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> a <br> </div> <div class="bottom"> bottom </div> </div> How could i do the exact same using a grid but the amount of space that the green top section takes up is

Maintain width and height of rotated square divs in CSS grid (responsive solution)

由 ℡╲_俬逩灬. 提交于 2019-12-02 07:07:11
I am trying to maintain a consistent height and width of my square divs using CSS grid across devices. I've rotated the grid in an attempt to make a 'diamond' shape, but this shape changes when the screen resizes. How do I keep a consistent perfect rotated square width and height in my grid where the container takes up the entire viewport height and width? .grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 1em; grid-row-gap: 1em; transform: rotate(45deg); overflow: hidden; } .grid>div { border: solid 1px red; } .container { width: 100%; } .grid { width: 100%; height

Span background color across viewport width

由 ＊爱你＆永不变心＊ 提交于 2019-12-02 06:45:52
问题 I am trying to build a responsive navigation bar with CSS Grid layout that spans across the viewport width, but the inner items should be centred and aligned with other container elements on the page. The result that I want is displayed in the code below, however, I don't feel that this is an elegant solution as I used 2 separate <div> elements stacked on top of each other. One <div> is for having the items centred and the second <div> is to cover the background-color across the viewport

Span background color across viewport width

由 烂漫一生 提交于 2019-12-02 06:23:39
I am trying to build a responsive navigation bar with CSS Grid layout that spans across the viewport width, but the inner items should be centred and aligned with other container elements on the page. The result that I want is displayed in the code below, however, I don't feel that this is an elegant solution as I used 2 separate <div> elements stacked on top of each other. One <div> is for having the items centred and the second <div> is to cover the background-color across the viewport width. Is there a better way of doing this using the CSS Grid layout? [EDIT] I am looking for a way to make

Making the content inside grid items equal height in CSS Grid

由 允我心安 提交于 2019-12-02 05:43:27
问题 I am trying to figure out how to get two columns of my grid the same height. Here is what I am after: xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x x qqqqqqqqqqqqq x x qqqqqqqqqqqqqqq x x x x qqqqqqqqqqqqqqq x x x x qqqqqqqqqqqqqqq x xxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxx This is where the x's represent a border of a grid (display: grid) and the q's are labels and input fields. Here is all the code and a link to the same on codepen. .container { font-family: Arial

Flexbox, strange behaviour with CSSGrid

由 给你一囗甜甜゛ 提交于 2019-12-02 05:03:30
I have this situation: https://jsfiddle.net/johnsam/rdtva2fq/ On Chrome it works good, see this: It start (see "FIRST" and "LAST" btn). Good. On Safari it doesn't (also with iPad/iPhone, it's the same) see this: "FIRST" btn OK, "LAST" one nope. The page has a scrollbar that is what I don't want! If I remove the header part it works good, so my guess is Safari doesn't recognize the ( height: 100vh MINUS the header part of that height) maybe. I'm right? Code: <div class="my-all d-flex flex-column height100"> <div class="container-fluid" style="background: red;"> <div class="row"> <div class="col

Responsive css grid layout with max-width items

由 感情迁移 提交于 2019-12-02 04:10:51
问题 I am looking for a way to automatically generate a grid, that always fills the available space, while shrinking the items until another item can be added. Most responsive grid implementations use something link this: grid-template-colums: repeat(auto-fill, minmax(120px, 1fr)); This works fine, except, that it uses the minimum value as the default image size, which results in interpolation of the images inside the grid. I want to do the opposite — set a max-width and shrink the images if
订阅 css-grid