在纵向模式下CSS网格不需要的空格

Question

我正在为Android开发一个网络应用。使用CSS网格我想要两个“视图”用于横向，一个用于纵向。布局主要包括产品显示和菜单（主要是按钮）。在纵向模式下，菜单应显示在产品下方（工作正常）。问题是网格左侧有一个巨大的空间，用于存放产品和菜单div。我也希望网格能够包裹产品。我使用服务器，因此将产品加载到包装器div。

肖像的通缉行为是产品和菜单左对齐，宽度调整为产品宽度。

jq

    .hide {
      display: none;
    }
    
    @media only screen and (orientation: portrait) {
      .grid {
        display: grid;
        grid-template-rows: [wrapper] auto [menu] auto;
      }
    } 
    
    @media only screen and (orientation: landscape) {
      body {
          background-color: lightblue;
      }
      .grid {
        display: grid;
        grid-template-columns: [wrapper] auto [menu] auto 1fr;
      }
    
      .menu{
        grid-area: menu;
        border-style: solid;
        display:grid;
        grid-template-rows: repeat(auto); 
      }  
    }
    
    .product {
      display: inline-grid;
      grid-template-columns: auto auto;
      grid-template-rows: repeat(6,[row] auto);
      padding: 5px;
    }
    .wrapper{
      grid-area: wrapper;
      border-style: solid;
      
    }
    .menu{
      grid-area: menu;
      border-style: solid;
    }

感谢您的时间。

Answer 1

如果我理解正确，您需要改为使用display:inline-grid，而product div只需要两列。

＆＃13;

＆＃13;

.product {
  display: inline-grid;
  grid-template-columns: auto auto;
  background: lightgreen;
}

.grid {
  margin: 1em;
  display: inline-grid;
  background: pink;
  border: 1px solid grey;
}

＆＃13;

<div class="grid">
  <div id="wrapper" class="wrapper">
    <div id="product" class="product">
      <div><u>Pos: </u></div>
      <div class="Pos">test1</div>
      <div><u>Artikel: </u></div>
      <div class="Artikel">Lorem, ipsum dolor sit amet consectetur adipisicing elit.</div>
      <div><u>Menge: </u></div><input class="Menge" type="text" />
      <div><u>Lagerplatz: </u></div>
      <div class="Lagerplatz">test6</div>
      <div><u>Bezeichnung: </u></div>
      <div class="Bezeichnung">Lorem ipsum dolor sit amet.</div>
    </div>
  </div>
  <div class="menu">
    <button type="button" onclick="mockConfirm()"> barcode</button>
    <button type="button" onclick="cancelPicklist()"> cancel</button>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;