Can you help me create a subpage that serves as a gallery overview?
As already described in the title, I would like to "build" a subpage that displays a gallery overview.
If you click on a specific CARD, you will be redirected to another blog subpage with the specific "topic" as a sequence of images.
I've already tried something: http://misanthrop.bplaced.net/test/open-public/Testseite-V11b1__13-07-24_BG%C3%9C.html
But I'm not entirely satisfied with it because I think there are still some errors in it.
My question: This only seems to work if I give each card a fixed width in pixels , so that when I shrink the browser window, the number of cards in the row decreases and they slide into the next row. This is what I want, and I'm using CSS Grid for this.
My question is, is there a more elegant way to do it or is this the only way?
In a narrow browser window and, for example, at 500% font size, the grid with the work-wrapper class slides to the right outside of my HTML or body. What's causing this?
Could you please take a look at it and give me some tips?
Greetings M.
(1 votes)
Loading...
There’s nothing going on with me. Possibly lies with the browser or because you increase it to an ineffective value.
The fixed preite in PX you can possibly. replaced by data in another unit. On and for yourself there is the option to specify but not for free, you can find other options here:
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
Right, “fr” I haven’t tried yet. Then it is calculated how much space is needed for the corresponding current number of CARDS. Try it. It’d be easiest. Because it’s so, if possible, I don’t want to make any more gasses in PX.
M.
In doubt, then take rm, percentage or other relative data.
https://www.w3schools.com/cssref/css_units.php
I don’t know. may also be that the percentage is relative to a value which is just small.
I always do it by trying and googling.
Otherwise, you can also use “display: flex” instead, I don’t know if it works better.
O.K. yes, I also asked if there are others, there are better possibilities. I found a PEN in the WEB with a similar example and applied it for me. It is only important for me to reduce the number of CARDS in a corrupted browser window, and to jump into the next line until there is only one CARD at the end. And it does. I hope for your tips and tricks.
If I use values in my grid-template %, then I get only five narrow cards in one row. So you mean what I have is quasi ““? Is it different? Or is it the way I got it?
So according to the grammar on the website, percentages should go. But not if you need ““.
I’m surprised. Actually, CSS should be able to convert other relative sizes.
Otherwise, maybe you can use “inline-grid”? Depending on what you want to do.
AND: NOPE, % – Information is also not possible, because then all CARDS remain exactly 20% (in a row) and do NOT follow.
NOPE, stop it.
appears to be necessary as MINDEST indication a PX value.