can I customize a css grid?

Asked Jun 27 '19 at 05:52

Active Jun 27 '19 at 06:53

Viewed 59 times

Sorry for my bad English. I'm creating an application to load images. I have a css grid and loading new images via infinite scroll. After that new images adding to grid.

An I have a problem. Previous images changing position when adding new. I think because a grid does searching where add it.

Can I put a new images to grid and don't lost position of previous images? For example, as in Google (Pictures tab).

<!--Images grid-->
<div class="images-grid">
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
    <div class="item"><img src="..." /></div>
</div>

CSS

.images-grid {
    display: grid;
    column-count: 4;
    column-gap: 0;
}

I changed the css code:

.images-grid {
    display: flex;
    flex-wrap: wrap;
}

An I getting blocks with the same height.

I need images with different height and the same width. (Like here)

edited Jun 27 '19 at 06:28

asked Jun 27 '19 at 05:52

General2001

It might help to include a [minimal, reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) that demonstrates the problem. – showdev Jun 27 '19 at 05:53
Can you add snippet please? – Mordecai Jun 27 '19 at 05:54
I added relevant part of code. – General2001 Jun 27 '19 at 06:03
1

With standard grid layout, no. You still have to deal with rows and columns. The [masonary](https://masonry.desandro.com/) library or similar will serve your purpose. – Jon P Jun 27 '19 at 06:33
OK. I'll try to use it. – General2001 Jun 27 '19 at 06:36
The problem solved by using this library. But I have new question. How can I optimize my columns for different screens? I found only 'column-width' property. And I can't to set columns count. – General2001 Jun 27 '19 at 07:45

can I customize a css grid?

0 Answers0