Add grid-based stack placement for combined search

[maccabeelevine]

This is a CSS Grid based layout for combined search, as an alternative to the existing flex-based modes. This has two primary advantages which I cared about:

• combined.ini says "The order of sections in this file will control the display order of search results on screen." This is actually true only on wide screens. On mobile the columns are collapsed so that everything in column 1 displays above everything in column 2, etc. Grid mode actually does display things in the intended order regardless of width.
• All columns in a given row get the same height, without any JS or additional CSS. This is a visual preference I see in many single-search implementations, and something our institution likely wants.

Of course there are other flexibilities you can get from a grid layout as well, such as more complex layouts of the individual search modules. I would probably leave those to local customizations, unless someone has a compelling idea for how to generalize it. But I do think that the basics of grid layout is worth including as an option in the core, for the advantages above and so it's easier to do those local customizations.

Now that all browsers support grid layout, which was obviously not the case when 'combined search' was developed, one could argue for actually replacing the existing 'distributed' mode. But I think it's best to leave it as-is for backwards compatibility, and because some people prefer the uneven / adaptive heights of each module.

[demiankatz]

Looks like this has some conflicts that need to be resolved (nothing hard -- just merge and rebuild the CSS). Other than that, it looks good to me, but since I'm not nearly the HTML/CSS expert that @crhallberg is, I'd be interested in hearing whether he has any suggestions before merging this.

[maccabeelevine]

Looks like this has some conflicts that need to be resolved (nothing hard -- just merge and rebuild the CSS).

@demiankatz Yup lots of PRs lately with CSS changes. Fixed.

Other than that, it looks good to me, but since I'm not nearly the HTML/CSS expert that @crhallberg is, I'd be interested in hearing whether he has any suggestions before merging this.

Yes please!

[demiankatz]

@maccabeelevine, I took a look at this from a visual perspective, and I notice that distributed mode and grid mode look nearly identical, except that distributed mode has more right margin. Is this intentional? If it's easy to change, it might make sense to align these so that they look identical except for the ordering. Screen shots:

Distributed:

Grid:

[maccabeelevine]

distributed mode and grid mode look nearly identical, except that distributed mode has more right margin

@demiankatz Not intentional so much as the result of minimal CSS and I figured it was benign. But I agree it's better to match the look of distributed by default, since I've specified what were meant to be the only differences. The two modes should now have identical widths at all breakpoints.

[demiankatz]

@maccabeelevine, I took a closer look at your new template and compared it against existing ones, which led me to notice some potential optimizations and possible bugs.

The potential optimizations were in code that was copied from other existing templates, so I opened #3118 to optimize everything.

[maccabeelevine]

The potential optimizations were in code that was copied from other existing templates,

@demiankatz Yes, exactly. I realized I was increasing the duplication among these stack-x templates but figured any refactoring should be done in a separate PR, as you're doing now.

[demiankatz]

Thanks, @maccabeelevine -- this should be ready to merge, but I'll leave it open in case @crhallberg has a chance to give it a look. If you don't hear from him by Thursday, feel free to merge.