_grid.scss .row > * impacts on many blocks and regions

[webprogrammierer]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

This code in _grid.scss

@if $enable-grid-classes {
  .row {
    @include make-row();

    > * {
      @include make-col-ready();
    }
  }
}

impacts on many block, regions and other elements having the. row class.

The code results in the following CSS:

.row > * {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x)* 0.5);
    padding-left: calc(var(--bs-gutter-x)* 0.5);
    margin-top: var(--bs-gutter-y);
}

Is is a really bad idea to use .row > * without any .grid class.
On thausends of sites this leads to necessary but not easy CSS adjustments on a lot of blocks, elements, regions which use the .row class.

Can you plesae remove / adapt these lines and to ensure they does not result in .row > * ?

Thank you.

Reduced test cases

<section class="row region region-menu">
     <a href="/" title="Startseite" rel="home" class="navbar-brand">
           <img src="/themes/custom/xxxx/logo.svg" alt="" class="img-fluid d-inline-block align-top">
            <span class="ml-2 d-none d-md-inline"></span>
    </a>
    <nav role="navigation" aria-labelledby="block-mainnavigation-menu" id="block-mainnavigation" class="contextual-region block block-menu navigation col-12 menu--main">
     ...
   </nav>
   <div class="search-block-form contextual-region block block-search block-search-form-block" data-drupal-selector="search-block-form" id="block-searchform" role="search">
     ....
   </div>
</section>

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.3.3

[github-actions]

Hello @webprogrammierer. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[webprogrammierer]

This is browser independent as you can see.

Anybody can see, that using

.row > * {
}

is a great problem!

[julien-deramond]

Hello @webprogrammierer
If possible on your side, you've mentioned a reduced test case in the description. Could you please transform it to a live demo with CodePen, StackBlitz, or any other tools? It saves us a lot of time.

[webprogrammierer]

For this problem

.row > * {
}

there is no demo necessary. Everybody can see the problem immeditally. This will impact on thausands of sites with different effects.

[mdo]

No changes planned here.

[webprogrammierer]

Hello @mdo .
Why no changes if it impacts thausends of sites with massive layout effects?

[webprogrammierer]

I am sure, this will be changed in one of the next releases.
Why not do it just now?