CSS网格上的固定大小按钮

Question

JSFiddle I've created to show my case

我已经使用-template-areas创建了简单的网格。在“第一个单元格”中，我放置了一个按钮。单击按钮时，其上的文本及其宽度大小都将更改（变长）。那是我的问题。

如果按钮有足够的空间容纳新文本（单击后）而不扩大其宽度，为什么按钮会更改其大小？

我知道在按钮上插入width: 100%可以使用一些静态值，例如f width: 250px。我对该解决方案不感兴趣的原因是，当我使用ng-bootstrap：dropdown component并将其宽度设置为100%时，它上的文本没有改变按钮的大小宽度增加。这就是我认为能够获得与他们得到的结果相同的结果的原因，但是很明显，我的情况中缺少某些东西，因此是我的问题。

如何在css网格单元上使用带有width: 100%的按钮，当其文本的长度改变时宽度不会增加？

Answer 1

您将列定义为minmax(30px, auto)，而auto是罪魁祸首。基本上，您告诉浏览器自动计算列的宽度，但不使其全部相等。然后，内容将定义您面对的宽度。

您可以将auto替换为1fr，以避免此影响。您还使用了5列，因此您也应该更正此问题：

document.getElementById("card-btn").onclick = function() {myFunction()};

function myFunction() {
  document.getElementById("card-btn").innerHTML = "A little bit longer text";
}

.grid-container {
  display: grid;
  grid-gap: 1em;
  grid-template-columns: repeat(5, minmax(30px, 1fr));
  grid-template-rows: repeat(4, minmax(30px, auto));
  grid-auto-rows: minmax(50px, auto);
  height: 100vh;
  grid-template-areas: 
    "card1 card2 card3 . card4" 
    "card5 card5 card5 card5 card5" 
    "card6 . . . card7" 
    "card8 card8 card8 card8 card8";
}

.grid-container div {
  background-color: red;
}

#card1 {
  grid-area: card1;
}

#card-btn {
  width: 100%;
}

#card2 {
  grid-area: card2;
}

#card3 {
  grid-area: card3;
}

#card4 {
  grid-area: card4;
}

#card5 {
  grid-area: card5;
}

#card6 {
  grid-area: card6;
}

#card7 {
  grid-area: card7;
}

#card8 {
  grid-area: card8;
}

<div class="grid-container">
    <div id="card1">
      <button type="button" id="card-btn">
      Short text
    </button>
    </div>
    <div id="card2">
      card2
    </div>
    <div id="card3">
      card3
    </div>
    <div id="card4">
      card4
    </div>
    <div id="card5">
      card5
    </div>
    <div id="card6">
      card6
    </div>
    <div id="card7">
      card7
    </div>
    <div id="card8">
      card8
    </div>
  </div>

相关问题以获取隐式计算的示例：Maintain ratio between column in CSS grid. How grid-column is calculated?

Answer 2

您可以使用Display：块；或位置：受惊；

Answer 3

请注意， css已计算出所需的大小及其1fr

1fr =默认网格列的大小：