CSS网格适合一行的列宽

Question

我有一个三列的两行网格。每行的中间列都有一个文本。第一行的中间列需要适合文本。但是当第二行有较长的文本时，第一行的中间列将不适合文本。上图更好的解释：当第一行的文本较长时，它会正确匹配。但是当第二行的文本比第一行的文本长时，第一行的列将不适合文本。如何使第一行中间列的宽度适合文本？

Answer 1

如果您希望顶部文本根据父元素的宽度（已被.second-text-middle内部文本扩展）扩展，您可以使用简单的 JavaScript。

在这里，我们可以检查 和 的宽度，#n1并.first-text-middle增加 的font size: n%;，#n1直到它适合父级。

fitWidth(); 

window.addEventListener("resize", function() {

  fitWidth();  

});

function fitWidth() {

  let first = document.querySelector('.first-text-middle');

  let firstText = document.getElementById('n1');

  let textSize = 100; // we will use it like a base 100% font-size later

  

  // set font size to '#n1'  

  firstText.style.cssText = 'font-size:' + textSize + '%';

  while (first.clientWidth - 2 >= firstText.offsetWidth) {

    textSize = textSize + 1; //increments font size by 1% each loop

    firstText.style.cssText = 'font-size:' + textSize + '%';

    // basically in DOM you see only result of the very last loop of this 'while' statment    

  }

}

html,

body,

.grid-container {

  height: 100%;

  margin: 0;

}

.grid-container {

  justify-content: center;

  display: grid;

  grid-template-columns: 10vmin min-content 10vmin;

  grid-template-rows: 1fr 1fr 1fr;

  gap: 0px 0px;

  grid-template-areas: "left middle right ""left first-text-middle right""second-text-left second-text-middle second-text-right";

}

.left {

  border: 1px solid red;

  grid-area: left;

  text-align: right;

}

.right {

  border: 1px solid red;

  grid-area: right;

}

.middle {

  border: 1px solid red;

  grid-area: middle;

}

.second-text-left {

  border: 1px solid red;

  grid-area: second-text-left;

}

.second-text-right {

  border: 1px solid red;

  grid-area: second-text-right;

}

.first-text-middle {

  border: 1px solid red;

  text-align: center;

  grid-area: first-text-middle;

  align-self: stretch;

  vertical-align: top;

}

.second-text-middle {

  border: 1px solid red;

  text-align: center;

  grid-area: second-text-middle;

  align-self: stretch;

  vertical-align: top;

  overflow: hidden;

}

<div class="grid-container">

  <div class="left"></div>

  <div class="middle"></div>

  <div class="right"></div>

  <div class="left"></div>

  <div class="first-text-middle">

    <span id="n1">Lorem</span>

  </div>

  <div class="second-text-left "></div>

  <div class="second-text-middle">

    <span id="n3">LoremIps</span>

  </div>

  <div class="second-text-right"></div>

</div>