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.
Related
I am using a CSS grid inside of a CSS grid and I am having trouble getting two rows of three images to change into three rows of two images. It works in my browser when I resize the window, but not when I test in responsive design mode on an ipad width, even when set to landscape. I have tried using #media to set a specific breakpoint, but that doesn't seem to work either. Here is my grid and what I have tried so far:
/*Primary container*/
.grid-container {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3rem;
}
/*Secondary container*/
.section-grid-index {
--auto-grid-min-size: 16rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
column-gap: 1rem;
row-gap: 2rem;
grid-area: 4 / 3 / 10 / 9;
}
#media screen and (min-width:768px) {
section > article {
display: block;
width: 45%;
}
}
#media screen and (min-width:768px) {
section > article {
grid-template-columns: 1fr 1fr;
width: 45%;
}
}
#media screen and (min-width:768px) {
section > article {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
width: 45%;
}
}
#media screen and (min-width:768px) {
.article {
grid-template-columns: 1fr 1fr;
width: 45%;
}
}
I tried the individual media queries one at a time. The best that I can get is a single column of 6 items, each 45% of their original size. I used 45% just in case I had some issue with the box model to see if that is what was throwing things off.
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.
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 have a simple grid, below, which works but I've been scratching my head on how to eliminate the media queries. Am I overthinking this, or is there a more efficient way to do this without media queries?
.wrap {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1em;
grid-auto-rows: minmax(100px, auto);
}
.wrap>div {
padding: 1em;
border: solid orange 1px;
}
#media (max-width: 1000px) {
.wrap {
grid-template-columns: repeat(3, 1fr);
}
}
#media (max-width: 600px) {
.wrap {
grid-template-columns: 1fr;
}
}
There's nothing inherently wrong or inefficient with using media queries with grid. You can avoid them in certain scenarios (eg. if you have a list of the uniform cards) if you wish, by using auto-placement. The code would look somehow like that:
.listing {
grid-auto-flow: dense;
grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
}
.listing .wide {
grid-column-end: span 2;
}
This code comes from MDN article where you can learn more about this functionality and adapt it to your needs.
I have some problems to add a margin to my grid layout.
I can't insert margins to the body or my .container that is taking the whole viewport.
When the page gets scrollable... the vertical scrollbar forces also a horizontal scrollbar.
.container {
height:100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"footer"
;
}
Use "box-sizing: border-box"
.container {
box-sizing: border-box;
height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"content"
"footer"
;
}