enter image description hereI have a gridbox with 2 gridboxes, 3fr and 1,5fr. Now I would like to make a CSS that has something like "if gridbox 2 (1,5fr) is smaller than 100px, go to the next row. I don't know if this is possible.
I think flexbox might be easier for what you're looking to do, but if you want to use a grid you will have to use #media.
.container{
display: grid;
grid-template-columns: minmax(200px,3fr) minmax(100px, 1.5fr);
}
#media screen and (max-width:330px) {
.container{
grid-template-columns: 1fr;
}
}
You may have to adjust the numbers depending on your particular code, but this will make the elements inside the "container" class take up 100% when below the threshold.
Related
Hey all not to sure where I should ask this question but basically Im working on Etch a Sketch and for my original 16x16 grid. I used display:grid; and grid-template-columns and wrote auto 16 times. This did the trick but Im guessing its not the way to go when you have a grid that 90x90 Any tips?
Use the repeat() function:
grid-template-columns: repeat(90, 1fr);
This can be used for grid-template-rows also.
References:
repeat().
I think this is what you are looking for:
/*Creates 90 columns, each 150px in width*/
grid-template-columns: repeat(90, 150px);
/*Creates 90 rows, each 150px in height*/
grid-template-rows: repeat(90, 150px);
I use CSS Grid to show 2 columns (50% grey/50% black). You see how it looks
I want to make them full width on the mobile, so that gray would be in the first line, and black one in the second line.
My CSS:
.container {
display:grid;
height:100vh;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr))
}
What I am doing wrong?
P.S. I know all things can be done with #media queries, but I need more modern way.
I have created a CSS GRID and each row has 2 columns. The first column takes up 25% of the width and the second column takes up 75%. I have achieved this using
.grid-container{
display:inline-grid;
grid-template-columns: 1fr 3fr;
}
Now, I want to make it responsive such that when the screen size reduces beyond a certain point, the column should be on top of one another and each column should occupy 100% of the width container.
Every solution I've come across online does make it responsive, BUT it also changes my initial column width from 25%:75% to 50%:50% and I want to avoid that. Any suggestions or tips would be greatly appreciated. Thank you all in advance!
You can use media queries for that:
.grid-container {
display:inline-grid;
grid-template-columns: 1fr 3fr;
}
#media (max-width: 800px) {
.grid-container {
grid-template-columns: 1fr;
}
}
I have a two column layout in which one column displays a number of images on a grid. The size and number of the images vary. I want the images to either show one a line, or two per line, depending on the size of the image and the screen. I have the below grid set up:
#media (max-width: 2000px) {
.productimg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(195px, 2fr));
grid-gap: 5px;
grid-auto-flow: row dense;
}
The images are given a class .u-max-full-width to keep them contained within the grid:
.u-max-full-width {
max-width: 100%;
box-sizing: border-box; }
For the most part this works. See below for the ideal layout:
However, at certain screen widths the images break into three columns. This happens with particularly thin images as soon as it is possible to put three 195px width images on the same line. I thought it might be that the images reach their source width and then rather than remain there shrink back to 195px but they are moving down to 195px before reaching their max size.
For example, images with a width of 336, 353, and 390 respectively will switch to a three col. when the container div is only 595px wide, more than small enough for the 336px and 353px images to fill it without forcing a third in.
If I increase the min width this solves the issue, however, the images will not properly fall into two rows at smaller resolutions. I tried using a #media declaration for the range where the container div can hold three 195px images, and declaring an absolute max size.
#media (min-width: 1542px) and (max-width: 2000px){
.productimg {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(195px, 350px));
grid-gap: 5px;
grid-auto-flow: row dense;
}
This does seem to prevent three columns from developing, but now it jumps from two to one columns between 1541 and 1542px in screen width because the max width is being prioritized, which is not what I want at all.
What I want to do is keep the columns to a maximum of two but to fill the row completely as long as the images are not smaller than 195px in width, but I can't seem to find any way to do that simply. I have looked at all of the various formatting declarations for grid, but am struggling to conceptualize their use. I wonder if grid is even the appropriate tool to use in this situation, but I haven't found any better solution.
Any assistance in this issue would be appreciated.
Use max() combined with viewport unit to make the column width always big enough to always have a fixed number of columns on big screen (in your case 2).
grid-template-columns: repeat(auto-fit, minmax(max(195px,Xvw), 2fr));
Adjust the X until you get the result you want.
Example:
.box {
display:grid;
grid-template-columns: repeat(auto-fit, minmax(max(195px, 45vw), 2fr));
margin: 10px;
grid-gap: 40px;
}
.box>* {
height: 100px;
background: red
}
<div class="box">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Related question: CSS grid maximum number of columns without media queries
You can use like that also...
grid-column: 1 / 2;
This CSS almost does what is needed:
always fill the container 100% so no margin is seen.
resize images to fill the container without media queries or calculations.
but certain screen sizes create a larger image than is wanted
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 6px;
}
the 1fr does great EXCEPT for when the images get too big.
If I use minmax(200px, 300px), then most of the time, the margins get too big.
Is there a way to get the benefits of 1fr, but also have a max-width as well?
so resizing the images SMALLER is okay, but increasing the image size is not okay.