Home Original page

feat(page): use subgrid to align masthead to page by srambach · Pull Request #6870 · patternfly/patternfly

@srambach I also modified page layout.

Gave page gap property and padding

:root {
  --pf-v6-c-page--Gap: var(--pf-t--global--spacer--lg);
  --pf-v6-c-page--PaddingInline: var(--pf-t--global--spacer--lg);
  --pf-v6-c-page--ColumnGap: var(--pf-t--global--spacer--lg);
}

Added padding to page

.pf-v6-c-page {
  padding-inline: var(--pf-v6-c-page--PaddingInline);
}

Removed margins from nav, masthead, and page elements and removed grid-areas. This approach was more understandable to me, although you could stick with grid-area.

.pf-v6-c-nav,
.pf-v6-c-page > .pf-v6-c-masthead,
.pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__brand,
.pf-v6-c-page__sidebar,
.pf-v6-c-page__main-container {
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
  --pf-v6-c-page__main-container--MarginInlineEnd: 0;

  padding-inline: 0; // remove padding
  margin-inline: 0; // remove padding
  grid-area: unset;
}

Added border to masthead__main in favor of using divider

// masthead border
.pf-v6-c-masthead__main {
  position: relative;
  border: none;
}

.pf-v6-c-masthead__main::before {
  content: "";
  inset-block: 100%;
  inset-inline: calc(var(--pf-v6-c-page--PaddingInline) * -1);
  position: absolute;
  border-bottom: 1px solid gray;
}

Removed width from and added negative margin to sidebar, then applied the same inline padding to sidebar__body to accommodate scrolling for the entire sidebar.

.pf-v6-c-page__sidebar {
  width: unset;
  margin-inline-start: calc(var(--pf-v6-c-page--PaddingInline) * -1);
  margin-inline-end: calc(var(--pf-v6-c-page--ColumnGap) / 2);
}

.pf-v6-c-page__sidebar-body {
  padding-inline-start: var(--pf-v6-c-page--PaddingInline);
  padding-inline-end: calc(var(--pf-v6-c-page--ColumnGap) / 2);
}

Updated grid-template-columns and column spans for tablet layout

@media screen and (min-width: 768px) {
  .pf-v6-c-page {
    grid-template-columns: min-content minmax(200px, max-content) 1fr;
  }

  .pf-v6-c-page__sidebar {
    grid-column: 1 / 3;
  }

  .pf-v6-c-page > .pf-v6-c-masthead,
  .pf-v6-c-page__main-container {
    grid-column: 1 / 4;
  }

  .pf-v6-c-page > .pf-v6-c-masthead {
    grid-template-columns: subgrid;
    column-gap: inhert; // or whatever value needed
  }

  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__main::before {
    display: none; // this applies to desktop presentation
  }
}

Updated grid-template-columns and column spans for desktop layout

@media screen and (min-width: 1200px) {
  .pf-v6-c-page > .pf-v6-c-masthead .pf-v6-c-masthead__main {
    grid-column-start: 2;
  }

  .pf-v6-c-page > .pf-v6-c-masthead {
    grid-column-start: 1;
    grid-column-end: 5;
  }

  .pf-v6-c-page__main-container {
    grid-column-start: 3;
    grid-column-end: 5;
  }
}