Dear support, developers,

I wish the whole team of Coffeecup and all web developers a Happy New Year 2020 and good health.
I also hope that Coffeecup will implement our promised custom code editor, all the input HTML5 controls, CSS Build annimation toolset, field voor inline css...

Can someone like a video how to create a CSS Grid Photo Gallery without naming each cell but straight and straight with lines in rows and columns. I have already tried it but am unable to program a row and column gap of 10px at all. It's struggle for programming the gaps in the CSS grid for mobile first and then larger screens. It's good if you give an roadmap how can I do this.

Thanks

Kind regards
Stephane

Dear support,

Maybe an bug there is no field for enter the amount of rows and columns.
Site designer write default three chooses: "no-repeat", "auto-fill", "auto-fitt"
I want develop this css rule but there is no option to enter amount rows en columns?
grid-template-columns:repeat(8, minmax(10px, 1fr);
grid-template-roww:repeat(4, 10vw);

How can I do fix this?

With kind regards
Stephane

My project but not gallery errors

I'm not the right person to give a reply here, as I've said before, CSS grid is not my speciality. But since nobody else has had time, I'll try to give at least some advice.

It would make it easier for you if you started with just a single column, or maybe two, in flex. Because as it is now, the images are very tiny on a phone. Then after the first, or maybe even second breakpoint you could change to grid, since you will then have some more width to play with. Also, you don't need to have the same grid all the way, you could position three or four images next to each other at first, and then at the next breakpoint change the grid to allow more images beside each other.
I don't know what you intend to end up with, a grid system of 4x3, or 6x2 or something else. You have 12 images, most of them have the same width whereas the height is very different. Of course it would have been easier if they all had the same proportions, but since they don't, you will have to make adjustments, so that they display correctly. That may be done with some extra rows in the grid, or let some of the images display much larger than the rest.
One thing there is no need to do, is having each single image container also display grid. It is enough to let the holding container display: grid.

See if this works.
I believe I found a bug, I am not sure.
When you set the gap as 10 px, as I am sure you have tried, no gap is produced correct? and when you preview in app, or in a browser, no gap correct?
Now, change the units, and apply. I changed the 10 px to 10 em, and got a WIDE gap.
Now, change the units back to px and apply again. The gap should appear as 10 px.

I suggest using a container for each cell, then place your image in the container.

Don't forget to set the design for Display for Grids.

If you want lines between the cells, then you need to style the cell's containers/divs and set padding. Or, use the 10px as your line, and give the parent container a background color.

When you work with the cells, I suggest giving the cells different background colors while working with them.

I got really messed up trying to figure something out for you last night and did not get a solution, and can not work on it right now.

This is what I would do if I were you. You have a lot of bloat code and half your images have different styles. You should be able to do this with every image being one style, so later on, you can have it a 5x20 grid if you want by just duplicating containers and changing the images.

1 Create a fresh project of just a grid, 2 rows 4 images, don't complicate it.
2. container for grid.
3. create a container, give it a style name (!important)
4. create image inside that container and give it a style name (!important)
5. duplicate the container 7 times (you want these all the same custom class, or you have to manually assign a class to each container and image, so do it before styling) - and you have about 9 different classes for images right now and I think superfluous classes for the containers as well)
6. set grid properties, and gaps as I suggested earlier (you need to change units, then change units back to px). Your grid container will also need padding top and bottom. All you need is just 4 columns on auto. They should just fill in across then underneath that. When you select the grid container and launch grid designer, it'll automatically have one column and lots of rows. delete all but one row, and make it 4 columns
7. create columns.
8. style image container
9. style the image to expand to the container using the object contain properties and width/height 100% (not all your images are same size), or change the image to however you want, but there are different sizes, you will want them to appear the same size or style the container, or style the images to be in the center.
10. I did manage to get a good looking grid, but the images were not showing right because they expanded too much.
11. if you give the grid container a background color ( had larger borders on left and right) and you want the border to be exactly what your gap size is, then you will have to so style for the grid container and specific column widths, all as %, or all as px I believe. I don't think that was the intention of the gap, was to give the appearance of a table.12. make it a component.

https://drive.google.com/file/d/1gRQV0HNwgbqyFC9fxsO-6fCCH8gCSTlG/view?usp=sharing

Does this help? For brevity, I created a whole new page. I did not want to reuse other class names, and because I was encountering unexpected behavior, possibly because of my own fault.

Its just a 4x2. But you can alter it.

I have background gradients for the image containers, so you can see them. And a background color for the grid container. If you want a tight box around the grid of images, then you need to do styling I have not explored, such as adding another container or specifically styling the grid container. But remember, gaps are shortcuts for layouts, not styling, so don't depend on gaps for styling, even though they are visually appealing for separating content.

oh, i did that file in just a larger view. id just copy some setting for smaller views.

Some days have passed since this question was brought up, and in the meantime I have had fun trying to produce an image gallery with CSS grid. I have used Stefke's pizza images, so hey, Stefke, if you find this useful, you are welcome to it.

It is a first attempt, and I did it the way I said in my earlier post, with a solid flex construction as the ground work for older browsers. Bob still swears by that, and he is likely wiser than me on this

If someone wants to comment on this gallery, telling me what can be made better, smarter, more correctly etc, I'm all ears.