Is this layout possible without subgrid and without repeating hardcoded values?

Question

I have the layout in this sandbox. The requirements are that the "Title Text", "More Options" and "Search" areas are fixed at the top of the screen and do not move when scrolling, that "Title Text" and "Search" are aligned together, and that the container height of these two is a controlled hardcoded value (53px). Below the sticky headers there should be two columns of normal content flow, as shown in the sandbox.

I am using grid as such:

grid-template:
    ". header-main  header-right  ." 53px
    ". header-main  content-right ." auto
    ". content-main content-right ." auto
    / 0.5fr 1fr 1fr 0.5fr;

"Title Text" and "More Options" are both grouped under a div which has header-main as its grid area, like this:

<div class="HeaderMain">
    <div class="Wrapper">
      <h2>Title text</h2>
    </div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
    <div>More Options</div>
  </div>

"Search" is under a div that has header-right as its grid area. I give sticky properties to header-right and header-main.

For the final requirement, to have "Title Text" aligned with "Search", I wrap "Title Text" in a Wrapper div, and give it the same height of the row, 53px. Both Wrapper and HeaderRight have display: flex; align-items: center; for vertical alignment.

This works fine, but my issue is that I need to repeat the hardcoded value 53px in two places. Of course I can put it in a css variable, but I am wondering if there is a cleaner solution.

In this sandbox (firefox only), I solve it using a subgrid, and the 53px manages to appear only once, but support for subgrid is minimal.

Is this layout possible without subgrid and without repeating hardcoded values?

0 Answers0