How do I make the grid rows shrink as the same rate as the columns? ...

Question

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

Answer 1

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

Answer 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

Answer 3

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?

Answer 4

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

Answer 5

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! 👍

Answer 6

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).

—

Answer 7

Gordon i have read it, i haven’t experimented with it though (resizing)
I’ll try it out when i get on my laptop_

Answer 8

Ginfio have you already fixed your problem?

Answer 9

@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/

Answer 10

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)?

Answer 11

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)

Answer 12

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)