.grid-child {
  display: flex;
  flex-direction: reverse;
}

@media (min-width: 991.98px) {
  .container-header {
    display: grid;
    grid-template-colums: [full-start]
      minmax(0,1fr) [mainstart] auto 1fr [main-end]
      minmax(0,1fr) [full-end];
    grid-template-areas: ". logo nav nav nav .";
    gap: 0 1rem;
  }
  .container-header .grid-child:has(.navbar-brand){
    grid-area: logo;
  }
  .container-header .container-nav {
    grid-area: nav;
    align-self: center;
  }
}