如何编辑网格框高度答案

【问题标题】：How to edit grid box height如何编辑网格框高度
【发布时间】：2021-11-19 04:20:34
【问题描述】：

是否可以让盒子 3-15 的总长度比盒子 2 的长度短？我希望它们是不跨越正文文本（框 2）但大约是框 2 的 1/5 的选项卡。

.wrapper {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-auto-rows:minmax(100px, auto);
  grid-gap: 1em;
}
.wrapper > div {
background: #eee;
  padding: 1em;
}
.wrapper > div:nth-child(odd) {
  background: #ddd;
}
.box1 {
  grid-row:1/3;
}
.box2 {
  grid-column: 2/4;
  grid-row:1/16;
}
.jsdoc {
  text-align: center;
}

<div class="wrapper">
   <div class="box1">
  <h1 class="jsdoc">JS documentation</h1>
     </div>
  <div class="box2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
  <div class="box3">Box 3</div>
  <div class="box4">Box 4</div>
  <div class="box5">Box 5</div>
  <div class="box6">Box 6</div>
  <div class="box7">Box 7</div>
  <div class="box8">Box 8</div>
  <div class="box9">Box 9</div>
  <div class="box10">Box 10</div>
  <div class="box11">Box 11</div>
  <div class="box12">Box 12</div>
  <div class="box13">Box 13</div>
  <div class="box14">Box 14</div>
  <div class="box15">Box 15</div>
</div>

【问题讨论】：

标签： html css css-grid

【解决方案1】：

您应该先创建 3 个盒子，而不是并排创建所有盒子。 .box1 用于标题，.box2 用于正文，另一个框用于选项卡项，并将所有框放在新框内。然后，您可以根据需要设置新盒子的样式。可能是grid-row:3/6;。

检查我的方法：

 .wrapper {
        display: grid;
        grid-template-columns: 1fr 3fr;
        grid-auto-rows:minmax(100px, auto);
        grid-gap: 1em;
    }
    .wrapper > div, .wrapper > div.tabs > div{
        background: #eee;
        padding: 1em;
    }
    .wrapper > div:nth-child(odd) {
        background: #ddd;
    }
    .box1 {
        grid-row:1/3;
        /* Vertically Center The Heading */
        display: flex;
        align-items: center;
    }
    .box2 {
        grid-row:1/16;
    }
    .wrapper > div.tabs {
        grid-row:3/6;
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1em;
        padding: 0;
        background-color: #fff;
    }
    .jsdoc {
        text-align: center;
    }

<div class="wrapper">
        <div class="box1">
            <h1 class="jsdoc">JS documentation</h1>
        </div>
        <div class="box2">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
        <div class="tabs">
            <div class="box3">Box 3</div>
            <div class="box4">Box 4</div>
            <div class="box5">Box 5</div>
            <div class="box6">Box 6</div>
            <div class="box7">Box 7</div>
            <div class="box8">Box 8</div>
            <div class="box9">Box 9</div>
            <div class="box10">Box 10</div>
            <div class="box11">Box 11</div>
            <div class="box12">Box 12</div>
            <div class="box13">Box 13</div>
            <div class="box14">Box 14</div>
            <div class="box15">Box 15</div>
        </div>
    
    </div>

希望这种方法可以帮助您创建您正在尝试创建的内容。

【讨论】：