Looking at the page CSS you can see the gap between sections is controlled by the --grid-gap CSS variable. Changing that from the default of 32px allows for a smaller gap between sections so there is more room for content.
But what is the correct way to change that variable value, or simply overwrite the selector, with a theme? After reading Home Assistant frontend docs, my configuration yaml below should work but it’s not doing anything.
I also have the same question. I tried to move over my existing 3 column layout over to sections but the content looks very squished and some of the cards become unreadable. The 32px gap is wasting a lot of room in blank space and would love to have the ability to take it to zero.
I used Inspect Website Elements in Chrome on the gap to find appropriate variable name.
Then edit View Configuration and select your theme. (quick reload config before doing so, and if you’d like to make other changes - quick reload is the way to go, there is no need to fully restart HA).
I have another idea/request - while there are many use cases for which a smaller/larger gap is sufficient, in our case I’d like to rather separate the sections more clearly with a vertical line/bar (in our case this would separate entities in different rooms more clearly).