Css grid - how to remove unused cells/space

HTML-CSS
1

I have a css grid that has 30 cells (for 30 pics).

        .sub-gallery{
            margin-bottom: 10px;
            display: grid;
            grid-template-columns: repeat(4,1fr);
            grid-auto-rows: 75px;
            gap: 10px;
            grid-template-areas: "pos0 pos1 pos2 pos3"
                                 "pos0 pos1 pos2 pos3"
                                 "pos0 pos1 pos2 pos3"
                                 "pos4 pos4 pos2 pos3"
                                 "pos4 pos4 pos5 pos3"
                                 "pos4 pos4 pos5 pos3"
                                 "pos4 pos4 pos6 pos6"
                                 "pos7 pos7 pos6 pos6"
                                 "pos7 pos7 pos6 pos6"
                                 "pos9 pos9 pos9 pos8"
                                 "pos9 pos9 pos9 pos8"
                                 "pos9 pos9 pos9 pos8"
                                 "pos9 pos9 pos9 pos8"
                                 "pos13 pos12 pos11 pos10"
                                 "pos13 pos12 pos11 pos10"
                                 "pos13 pos12 pos11 pos10"
                                 "pos13 pos12 pos14 pos14"
                                 "pos13 pos15 pos14 pos14"
                                 "pos13 pos15 pos14 pos14"
                                 "pos16 pos16 pos14 pos14"
                                 "pos16 pos16 pos17 pos17"
                                 "pos16 pos16 pos17 pos17"
                                 "pos18 pos19 pos19 pos19"
                                 "pos18 pos19 pos19 pos19"
                                 "pos18 pos19 pos19 pos19"
                                 "pos18 pos19 pos19 pos19"
                                 "pos20 pos21 pos22 pos23"
                                 "pos20 pos21 pos22 pos23"
                                 "pos20 pos21 pos22 pos23"
                                 "pos24 pos24 pos22 pos23"
                                 "pos24 pos24 pos25 pos23"
                                 "pos24 pos24 pos25 pos23"
                                 "pos24 pos24 pos26 pos26"
                                 "pos27 pos27 pos26 pos26"
                                 "pos27 pos27 pos26 pos26"
                                 "pos29 pos29 pos29 pos28"
                                 "pos29 pos29 pos29 pos28"
                                 "pos29 pos29 pos29 pos28"
                                 "pos29 pos29 pos29 pos28"
                                 ;

Problem is: when the number of fetched pics is 30, all is good but when there are less than 30 pics, there are empty cells in the bottom part of the grid and so my next DOM element (a button) appears way down after the corresponding empty space. I have looked this up for a few days to no avail. How can I remove that empty/unused part of the grid when returned number of pics is less than 30?

1 Like
2

How are you assigning images to grid-areas? Are you doing so via javascript, or within your HTML?

3

via javascript using fetch API.

4

Then wouldn’t you be assigning the grid-area based on the image’s index in the fetched array of images? Seems that would solve the problem before it’s a problem.

5 
const getPics = (searchItem,page) => {
        loadMorePhotos.style.visibility="hidden"
        fetch(`https://api.unsplash.com/search/photos/?query=${searchItem}&per_page=30&page=${page}&client_id=<your ID here>`)
        .then(res=>res.json())
        .then(data=>{
            description.textContent=searchItem
            if(data.results.length==0){
                gallery.innerHTML="<p>No photos. found.</p>"
                loadMorePhotos.style.visibility="hidden"
                return
            }
            const subGallery=document.createElement("div")
            subGallery.classList.add("sub-gallery")
            let i=0
            data.results.forEach(item=>{
                const div=document.createElement("div")
                div.classList.add("pos"+(i%30))
                const img=document.createElement("img")
                img.src=item.urls.regular
                img.classList.add("gallery-image")
                div.appendChild(img)
                subGallery.appendChild(div)
                i++
            })
            gallery.appendChild(subGallery) 
            setTimeout(()=>{
                loadMorePhotos.style.visibility="visible"
            },2000)         
        })
        .catch(err=>console.log(err))
    }
    getPics(searchItem, page)
6

It looks off to me to use grid and its grid-template-areas in particular that way, specifying a cell for every image you will eventuall get. The power with flex and grid is their flexibility and how you can make them be able to take any number of elements(or some anticipated amount) and align them according the pattern you give, which is obviously achieved with the set of css rules they offer. You already have the gird-template-columns automatically distribute the columns. The purpose of grid-template-areas is to define a more particular template and gives lot of power on what area(how many columns/rows) every grid area will take, without having to define it in every separate element. You hard-coded your grid container to create 30 spots, by the looks of it, for 30 separate elements; i assume if you have 20 elements, they will take the first 20 areas, while the remaining 10 will stay blank(but still take up their assigned space)

1 Like
7

You should try using an auto grid.

3 Likes
8

Thank you for your feedback. Do you mean to not use grid-template-areas?

9

Thank you for your feedback. Do you mean to forget about using grid-template-areas and use auto grid instead, sort of natural flow?

10

Thanks to all. Got it to work using auto grid and grid-area: span ?/ span ?;

1 Like
11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.