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.
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.
This is my CSS code
article {
background-color: lightblue;
border: solid;
margin: 0;
display: grid;
height: 100%; }
footer{
background-color: darkslategray;
display: grid;
padding: 1.5rem; }
#media screen and (max-width: 600px) {
article {
display: grid;
grid-template-areas: 'sc1'
'as1'
'sc2'
'as2'
'sc3'
'..';}
footer {
display: grid;
grid-template-areas: 'nv1'
'nv2';}}
#media screen and (min-width: 600px) {
article {
display: grid;
grid-template-areas: 'sc1' 'as1'
'sc2' 'as2'
'sc3' '..';}
footer {
display: grid;
grid-template-areas: 'nv1'
'nv2';} }
#media only screen and (min-width: 768px) {
article {
display: grid;
grid-template-areas: 'sc1' 'as1'
'sc2' 'as2'
'sc3' '..';
}
footer {
display: grid;
grid-template-areas: 'nv1'
'nv2';} }
On the browser the output is showing first media query result no matter what the screen size is..
Where am I wrong??
Syntax of code seems to me right. I want to change grid-template-area according to screen size
Divide the row into two columns using grid-template-columns. As a side note, you don't need to repeat display : grid from media query to media query unless you have changed it before, you should avoid mixing min-width and max-width. Just take the max-width : 600px out of the media query and you will be fine for small screens.
article {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: 'sc1' 'as1'
'sc2' 'as2'
'sc3' '..';
}
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'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'm writing my CSS in Less and for some reason the #supports is not being displayed. Could it be a nesting issue?
#supports(display: grid) {
.two-up {
#media screen and (min-width: #small-screen) {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
}
The LESS code compiles ok.
It works in both Chrome and Firefox:
https://codepen.io/oslego/pen/KeQpgr
#small-screen: 10em;
#supports(display: grid) {
.two-up {
#media screen and (min-width: #small-screen) {
width: 500px;
height: 500px;
background-color: green;
display: grid;
grid-template-columns: 1fr 1fr;
}
}
}
<div class="two-up"></div>
Perhaps you have additional code following that rule or competing with it in an unexpected way.