0
How do I make the grid rows shrink as the same rate as the columns? ...
I'm trying to make a video gallery (later I might make a web using the gallery) - using CSS grid. When I say "rows shrink as the same rate as the columns" I'm referring to youtube's home page (as an example). When you resize the page, the height + the width (or rows + columns) of the grid shrink about the same rate. But, mine the width (columns) only shrink which means the videos are sometimes too wide and it gets out of hand. Since you can't really resize on sololearn, this is the output of the code: https://web-grid-attempt.205135tmd.repl.co/ And the code I used for the output is: https://code.sololearn.com/WpcMnuwxpcgL/#html
12 Respostas
+ 2
To let the size of an element shrink in ratio,
create a container to store it,
and apply width height top/left/right/bottom of it in % of the container.
a demo for you :
https://code.sololearn.com/WSVayedIpf8X/?ref=app
+ 2
Mirielleđœ Gordon
I think I have the correct embed code now (I can't tell for sure as of right now (while I'm at school)),
But this is the new code with the correct embed code
https://code.sololearn.com/WpcMnuwxpcgL/#html
+ 2
The reason that the height remained the same, is because currently in your CSS:
iframe{
width: 100%;
height: 200px;
Don't use fixed height on the iframe.
Have you read the demo I coded for you above?
+ 1
and for the problem that Mirielleđœ mentioned, about not getting the correct embed src, read my answer in this thread:
https://www.sololearn.com/discuss/2177381/?ref=app
+ 1
Ginfio yes it is correct now, both the embed src, and the use of autofit function and minmax function. It is now responsive to different screen size. Great job! đ
+ 1
Gordon đ.
The real problem is:
The height of the video(s) is the same, it never changes when we resize the window; the width (of vid) on the other hand does change when we resize the window, because the grid sometimes stretches (in width)
Like â umm when i look at it on the other output (on desktop)( https://web-grid-attempt.205135tmd.repl.co/ ), and resize the window down all the way, the video grid (+vid) stretch really long.
Kind of like if you make a two column grid and resize the window bigger, the grid stretches long, ... and resize smaller, it stretches less and it shrinks.
Similar in this situation.
Thatâs why i was referring to Youtubeâs home page.
on youtube home page, When i resize to be smaller, the whole thing gets smaller, not just the width part. (i donât know if theyâre actually using grid / iâm assuming they might be).
â
+ 1
Gordon i have read it, i havenât experimented with it though (resizing)
Iâll try it out when i get on my laptop_
+ 1
Ginfio have you already fixed your problem?
+ 1
@Gordon
Removed the fixed height.
It made the height of the iframe smaller. And the stretch effect is still there.
Maybe should I use @media { ... }
and make less / more grid_ columns as the browser width increases or decreases_/?
..
current output https://web-grid-attempt.205135tmd.repl.co/
0
Gordon I looked at your code and experimented with it now.
and is it this part that makes it shrink in ration like that:
width: 80vmin;
height: 60vmin;
and if yes how would I apply it in my CSS grid (/my code)?
0
Gordon no.
I see your code, and i try to use it in my css grid, it didnât work for me.
I used the
width: 80vmim
height: 60vmin
part, and Iâm not sure where where and how iâd use it in my code (grid)
0
If you are using css grid, you don't need to use vmin,
remove the fixed height property of your iframe (currently css line 23)