This question already has an answer here:
Why percentage value within grid-gap create overflow in CSS grid?
(1 answer)
Closed 2 years ago.
I am making a list of items (cards) using grid, and the subgrid overflows into the next element element. Now, In Firefox, I don't have this problem. here is the code for the grid parent adn subgrid:
.grid-parent{
display: grid;
margin-top: 2rem;
grid-template-columns: 26rem [main-start]repeat(5, 1fr[main-end]);
grid-template-rows: min-content 1fr min-content max-content;
}
grid-child{
grid-column: 2/-1;
grid-row: 1/-1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min-content, 30rem));
grid-template-rows: repeat(auto-fit, 1fr);
justify-content: center;
align-items: start;
padding: 0 3%;
grid-gap: 2%;
}
.big-btn{
grid-column: 1/-1;
width: 40%;
padding: 1rem 0;
font-size: 2.6rem;
#extend .fw-700;
}
Try to put a margin-bottom on the big-btn?
Related
I have a column of a defined size (let's say 50px), then an undetermined number of columns that should divide the available space among themselves, and finally another 50px column.
I know this could be achieved if I knew the total number of columns beforehand:
body > div {
grid-template-columns: 50px repeat(3, 1fr) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
I also know I can do a fixed sized column + n columns this way:
body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
But the specific case doesn't work as it could this way. Instead, I'm left with an empty column at the end:
body > div {
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr)) 50px;
display: grid; grid-gap: 1rem; background: beige; width: 80%; padding: 1rem;
}
div div { background: IndianRed; min-height: 5rem;}
<div><div></div><div></div><div></div><div></div><div></div></div>
Is the thing I'm trying to do achievable with grid?
Remove the last column from the grid template. The column template would now look like this:
grid-template-columns: 50px repeat(auto-fit, minmax(1px, 1fr));
Then add this:
div div:last-child {
grid-column: -1;
width: 50px;
}
That should work!
my code is not working to set grid columns. However I'm following the exact same format as I've seen across the internet. Does someone know the solution to this? I think it might be by including a "repeat" function to create 6 grid columns of the same width. (it might work in VSC but it does not work in Cengage)
My grid-template-rows is working perfectly fine.
body {
width: 90%;
min-width: 640px;
max-width: 1024px;
margin-top: 30px;
margin-bottom: 30px;
margin-left: auto;
margin-right: auto;
display: grid;
gap: 15px;
grid-template-columns: 1fr repeat;
grid-template-rows: 50px 30px 1fr 1fr 100px;
}
grid-template-columns: 1fr repeat;
should be
grid-template-columns: repeat(6, 1fr);
<div class="container">
<div class="wrapper">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
}
.wrapper {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
align-items: space-around;
min-width: 300px;
height: 70vh;
background: whitesmoke;
}
#media screen and (min-width: 1100px) {
.container {
height: auto;
display: grid;
grid-template-columns: 1fr repeat(2, minmax(auto, 30rem)) 1fr;
background: pink;
}
.wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column: 2/4;
justify-content: center;
background: cyan;
}
}
I've created a column that contains three circles in it, each stacked on top of the other in a column, which all looks fine when the screen is narrow. But when the browser is widened and I add a media query for when the screen gets wider than 1100px, I want the column of circles to flip to become a single row of circles.
But when I do this using CSS Grid, it doesn't work, and two circles appear on one row, and the third circle appears below the first circle on a second row. You can see it at https://codepen.io/HorrieGrump/pen/ZEKxJgv
I can get it to work if I use flexbox instead (as shown below) by swapping out the current .wrapper block in CSS and using this new one with flexbox, but I'd like to know if it's possible to use CSS Grid instead of flexbox to do this.
Can someone please let me know how to get the media query to flip the column into a single row using CSS Grid – and not have to resort to flexbox?
.wrapper {
display: flex;
flex-direction: row;
grid-template-columns: repeat(2,1fr);
justify-content: space-around;
align-items: center;
grid-column: 2/4;
background: cyan;
}
Edit your media query for .wrapper
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
align-items: center;
grid-column: 2/4;
background: cyan;
}
I'm not very familiar with CSS and thought I had hit the jackpot with CSS grid however I did not realise that it wasn't very compatible with IE11. I have run into a number of problems trying to fix the following code:
.my-grid-filters {
display: grid;
grid-auto-rows: minmax(50px, 50px);
grid-gap: 5px;
}
.my-grid-filters filter {
display: flex;
align-items: flex-end;
}
#media screen and (min-width: 40em) {
.my-grid-filters {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
.my-grid-filters filter:nth-child(1) {
grid-column: 1 / -1;
grid-row: span 2;
}
}
I ran it through the Autoprefixer online tool which produced the following:
.my-grid-filters {
display: -ms-grid;
display: grid;
grid-auto-rows: minmax(50px, 50px);
grid-gap: 5px;
}
.my-grid-filters filter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
#media screen and (min-width: 40em) {
.my-grid-filters {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
.my-grid-filters filter:nth-child(1) {
grid-column: 1 / -1;
-ms-grid-row-span: 2;
grid-row: span 2;
}
}
However this seems to stack all of the grid elements on top of each other. This article includes a lot of information but I'm struggling to apply it to my code.
It seems to suggest that I need to place each element in the grid manually but part of my use case for CSS Grid is that I don't know how many of the repeat elements might be on the screen at once as they are generated by iterative javascript. This also makes it difficult for me to apply separate div ids too them.
Any help would be appreciated
I am using Miscrosoft Edge version 20.10240.17146.0
and I am have used
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 20px;
align-items: stretch;
margin: 15px 15px;
}
this CSS and edge doesnt Support this CSS.
Is there any alternate way so I can see my site better in Edge