This question already has an answer here:
Why the CSS calc() function is not working? [duplicate]
(1 answer)
Closed 2 months ago.
I have 2 grids, one of them shows 3 columns while the other shows 4 columns. I use different CSS classes to set the --cols prop.
.base-grid {
--w-max: 175px;
--gap: 0.5rem;
display: grid;
grid-template-columns: repeat(var(--cols), min(var(--w-max), calc(100% - (var(--cols)-1) * var(--gap)) / var(--cols)));
gap: var(--gap);
justify-content: center;
}
.a-grid {
--cols: 3;
}
.b-grid {
--cols: 4;
}
.base-grid>div {
height: 50px;
background: red;
}
<div class="base-grid a-grid">
<div></div>
<div></div>
<div></div>
</div>
<div class="base-grid b-grid">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
This snippet works in Chrome but in Firefox both grids only show 1 column. Why?
The issue was the format of (var(--cols)-1). Apparently on Firefox the parser is not smart enough to figure out this is arithmetic. You have to put a space around the minus sign like so (var(--cols) - 1)
Related
I have a flex layout with elements in it. I want one of them to always stick in the top right corner.
When I put it out of the container (below, in blue), it works for the basic cases, but in my last example, I would want the 5 box to be under the fixed one. How can I achieve that? Maybe with grid? I never used them.
Another way to see it is to say that the space for that element should be reserved / not used by the flex elements.This way I could put the fixed one there with position: absolute;
CSS grid can do this and the fixed element can be anywhere inside the container:
.container {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
grid-auto-flow:dense;
grid-gap:5px;
}
.container > div {
height:50px;
background:red;
}
.container .fixed {
grid-column-end:-1; /* last column */
grid-row:1; /* first row */
background:green;
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div class="fixed"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
I have a flexbox container row and there are three items inside. I want one of them to be in the very center but I want the other two 2 to be slightly over it and to the most left and to the most right respectively. I want something like this:
I tried with aligning and justify content but it did not work.
Thanks in advance.
Here is an illustration of what you want. Just give the middle element a margin-top:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 50px;
height: 100px;
background-color: red;
}
.center {
margin-top: 50px;
}
<div class="container">
<div class="right"></div>
<div class="center"></div>
<div class="left"></div>
</div>
This question already has answers here:
How to select a range of elements in repeated pattern
(2 answers)
Select every Nth element in CSS
(4 answers)
Closed 2 years ago.
I am looking for a way to right-justify specific columns (not all columns) in a grid in CSS without having to explicitly specify a special class or style for each column entry. For example:
<style>
.myclass {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
}
</style>
<div class="myclass">
<span>AAAA</span>
<span>BBBB</span>
<span>CCCC</span>
<span>DDDD</span>
<span>EEEE</span>
<span>FFFF</span>
<span>GGGG</span>
<span>HHHH</span>
</div>
So, I want the first and third columns right justified, and the second and fourth columns left justified without having to explicitly specify style or class for each span.
Thanks!
nth-child selector can do the trick
.myclass {
display: grid;
grid-template-columns: 100px 100px 100px 100px;
grid-gap: 10px;
}
span:nth-child(2n+1) {
background: #eee;
display: flex;
justify-content: flex-end;
}
<div class="myclass">
<span>AAAA</span>
<span>BBBB</span>
<span>CCCC</span>
<span>DDDD</span>
<span>EEEE</span>
<span>FFFF</span>
<span>GGGG</span>
<span>HHHH</span>
</div>
Example of what I need to get:
9 8
7 6 5 4
3 2 1 0
I tried using
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-end;
but what I get is:
8 9
4 5 6 7
0 1 2 3
which is not sufficient as ordering is important.
Also I thought of grid, but since width of elements vary it was not an option.
You should use flex-direction: row-reverse:
.container {
display: flex;
flex-wrap: wrap-reverse;
justify-content: flex-start;
flex-direction: row-reverse;
}
.container > div {
width: 20%;
border: 1px solid;
counter-increment: num;
}
.container > div::before {
content: counter(num);
}
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
You can use the css order property if you put each number in an element to select. https://www.w3schools.com/cssref/css3_pr_order.asp.
Editing because of downvote: I suggested this because when I read the question I thought the emphasis was on "order is important", meaning the order could very well change at some point and it needs to be flexible. An example of what I had in mind: https://jsfiddle.net/nr7vqw2e/.
If you are simply wanting to reverse the row then the answer by #Caro will get you there.
This question already has answers here:
Why doesn't percentage padding / margin work on flex items in Firefox and Edge?
(2 answers)
Percentage padding / margin on grid item ignored in Firefox
(2 answers)
Closed 4 years ago.
I've recently redesigned my website utilizing CSS grid and I've come across a specific problem with FireFox 52. I know FireFox has issues, so I'm looking for some help on how to solve this little layout issue.
https://codepen.io/Krazyhawk/pen/qyJmWQ
Example HTML
<div class="grid">
<div class="item"><div></div></div>
<div class="item">
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
<p>Stuff</p>
</div>
<div class="item"></div>
</div>
Example CSS
.grid {
width: 1200px;
display: grid;
grid-template-columns: 60% 1fr;
}
.item:first-child {
background-color: blue;
padding-right: 30px;
}
.item:first-child > div {
position: relative;
padding-bottom: 56.25%;
background-color: purple;
}
.item:nth-child(2) {
background-color: yellow;
}
.item:nth-child(3) {
background-color: grey;
grid-column: 1/3;
margin-top: 16px;
height: 50px;
}
I have two columns, and one underneath. The left column has a div in it that is used as an iframe container. To make that iframe responsive, it gets its height using a padding-bottom percentage. The right column is just a column with content, as well as the bottom one.
The issue lies with the padding-bottom percentage. The grid layout isn't recognizes the height of the div with padding-bottom, therefore the bottom bar doesn't allow enough space atop of it.
The solution solves itself if the left column has a height, but that's something I'd like to avoid. Giving it a height and keeping it responsive would likely require some JS and the resize event once the layout got down to tablet size (liquid layout).
As far as I know, this layout issue is specific to FireFox 52 (normally would cut it loose, but there is still a good chunk of user percentage).