# Combined mode but grid

Tiny Tiny RSS Development
fox March 9, 2021, 6:27pm 1

horrible, huh?

    @media screen and (min-width: 1400px) {
    		#headlines-frame {
    			display : grid;
    			grid-template-columns: repeat(2, 1fr);
    			grid-gap : 8px;

    			.cdm.expanded {
    				.footer {
    					border : 0;
    				}

    				border : 1px solid @border-default;
    			}
    		}
    	}
    }

image1826×1195 425 KB
sam302psu March 9, 2021, 6:52pm 2

I kind of like it. The concept at least.

linoth March 10, 2021, 1:41am 3

You got me curious.

A little rough in its current form if you’re someone toggling collapsed mode. Not sure exactly what caused it, but I wound up with the page getting wider a time or two while I tried it out. I’m sure that it’s actually pretty desirable for image-heavy uses, such as your example of Reddit. Would not have guessed that it could be pulled off with just some lines of CSS, but I don’t know web dev.

Neat.

fox March 10, 2021, 5:03am 4

yeah this would obviously only work for expanded mode

image1951×1267 552 KB

a bit more polished looking, i think.

e: it’s an option now.

fox March 11, 2021, 8:17pm 5

i made a really primitive plugin that fakes masonry layout for the grid:

image2033×1271 386 KB

its somewhat buggy and lacks any optimization whatsoever but cool nonetheless (when it works). enjoy.

https://git.tt-rss.org/fox/ttrss-grid-masonry

e: this needs latest master, just in case.

sam302psu March 11, 2021, 9:24pm 6

So I’ve been using this view and I like it but one small issue I can’t figure out how to fix is word wrapping in the frames. Words keep getting split between lines and making things hard to read sometimes. Is that something I can fix with the custom css?

edit: I should have mentioned I am running the dynamic docker setup and I restarted the containers a few hours ago.

fox March 12, 2021, 4:38am 7

i should probably go easier on word-breaking in there, limit to links only or something like that.

https://git.tt-rss.org/fox/tt-rss/src/branch/master/themes/light/tt-rss.less#L749

levito March 12, 2021, 9:07am 8

Hi @fox,awesome to see that rush of progress!

I’d suggest using `word-wrap: break-word;` instead of `word-break: break-all;`. This makes words only break if they are really wider than the container. Short words are not affected. So you might then also remove the restriction to links.

fox March 12, 2021, 9:34am 9

yeah this could work for text, but for links specifically it can make things ugly (uglier?):

image1615×439 74.6 KB

which is why i went with break-all.

levito March 12, 2021, 9:43am 10

Thanks for the quick reply and your explanation – I get your point. The only problematic edge-case I see with this is links at the end of a line.

Screenshot 2021-03-12 at 10.40.381334×530 56.7 KB

But I think that’s okay.

sam302psu March 12, 2021, 12:44pm 11

Thanks for the quick fix. It’s much better. I’m really liking the grid layout with mark as read on scroll. Thanks.

OldBear March 15, 2021, 4:33pm 12

I think it’s a nice layout to be set to feeds like Dilbert

toomyzoom March 20, 2021, 7:32pm 13

Good, now add it to android app

linoth March 20, 2021, 9:18pm 14

Feel a bit guilty since I gave feedback and disappeared.

I have an image heavy feed I’m very far behind on, and your first post made me try out expanded instead of collapsed. Sped things up immensely because apparently marking posts as read when you flip through them was CPU heavy on my server.

After that, columns just made things even faster for me.

I did run into an edge case that most people probably wouldn’t have even noticed, where a headline would be top-to-bottom in one column at 1080p, so I ham-fisted some CSS to set a max-height on titleWrap.

Thanks so much for this feature, fox. Didn’t even know I needed it.

sam302psu August 22, 2022, 4:29pm 15

Sorry to resurrect this old thread. I’ve really grown to love grid mode but I noticed the article headlines sometimes break words on to separate lines. It seems to happen with all themes. I don’t have the masonry plugin active either.

I’m using the stock docker setup.

fox August 22, 2022, 4:42pm 16
sam302psu:

> article headlines sometimes break words on to separate lines

yeah it’s a stock CSS thing, it’s either that or super long words breaking layout. i’m not fond of either behaviors.

there are several rules like this in the .less files:

    word-break : break-all;

ideas welcome, etc.

sam302psu August 22, 2022, 5:31pm 17

Thanks for confirming. I will take the occassional headline issue over breaking the layout. I’ll use this as a chance to learn something and if I come up with a fix I’ll let you know.

ManuelW June 24, 2023, 11:30am 18

How do I activate this? I installed the Plugin and set the checkmark, but nothing happens.