I'm trying to make my grid system (using css) responsive.
#results {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
I've been trying for a while and can't seem to figure it out.
Related
I am trying to make a responsive grid section using media queries and CSS grid. The grid looks fine on full width but as soon as 999px and 750px media queries kick in I begin to have a strange problem where I have extra CSS grid gutters on the right and on the bottom of the grid.
.categories-grid > .website-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-template-areas:
"nails nails offers offers"
"image image kids-img kids"
"image image hair hair-img";
gap: 40px 35px;
height: 1060px;
}
#media only screen and (max-width: 999px) .categories-grid > .website-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
grid-template-areas:
"nails nails"
"kids-img kids"
"hair hair-img"
"offers offers";
gap: 30px 25px;
height: auto;
}
#media only screen and (max-width: 750px) .categories-grid > .website-grid {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(6, 1fr);
grid-template-areas:
"nails"
"offers"
"kids-img"
"kids"
"hair-img"
"hair";
}
max750px media query
max999px media query
full width
I found the problem. The "image" div was causing an extra row to be created. after making a css rule to hide that div in the media queries the extra rows and columns went away.
I have a problem with my grid :
I am using a grid like this :
.grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
I have an image in the cell 3-3 :
.dice-pic {
background-image: url(assets/dice_6.png);
grid-column-start: 3;
grid-row-start: 3;
background-repeat: no-repeat;
}
I am trying to make this image in the center of the cell but when i add :
justify-self: center;
align-self: center;
my image disappear. Any idea how I could fix it ? thanks !
I suggest you use z-index, which should help you display your image on the top-level component.
For display sizes under 500px width, I would like to have only one column for my grid. Is it okay to write grid-template-columns: 1fr; for this? Or would be another option better? Maybe just grid-template-columns: 1;?
Thanks.
Example:
#grid {
grid-column-gap: 10px;
display: grid;
grid-template-columns: repeat(12, 1fr);
}
#media screen and (max-width: 500px) {
#grid {
grid-template-columns: 1fr;
}
}
I am using this CSS for my CSS grid declaration:
#slider_area {
grid-template: 1fr 1fr 1fr / 1fr 32%;
grid-column-gap: 8px;
grid-row-gap: 4px;
}
but it converts to:
#slider_area {
grid-template: 1fr 1fr 1fr 32%;
grid-column-gap: 8px;
grid-row-gap: 4px;
}
in my LESS, and the page view breaks.
You can check it here:
https://www.webtoolkitonline.com/less-to-css.html
Where can I report it, if it is a bug? And is there a workaround?
The problem is that LESS thinks this is a mathematical operation.
For example if you write:
#slider_area #A { grid-area: 1 / 2 / 1 / 2; }
Then it will output:
#slider_area #A { grid-area: 0.25; }
You can make use of escaping to workaround the problem:
Escaping allows you to use any arbitrary string as property or
variable value. Anything inside ~"anything" or ~'anything' is used as
is with no changes except interpolation.
#slider_area {
grid-template: ~"1fr 1fr 1fr / 1fr 32%";
grid-column-gap: 8px;
grid-row-gap: 4px;
}
Feels like a bug in LESS, you can use this workaround:
#slider_area {
#grid-template: "1fr 1fr 1fr / 1fr 32%";
grid-template: e(#grid-template);
grid-column-gap: 8px;
grid-row-gap: 4px;
}
the e function will just strip the parentheses from a variable
As mentioned in another answer, this is a bug with LESS, where the forward slash is interpreted as a division slash (see the report).
So instead of using the grid-template shorthand property:
grid-template: 1fr 1fr 1fr / 1fr 32%;
Just stick to the longhand properties:
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 32%;
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