CSS网格适合一行的列宽

Question

我有一个三列的两行网格。每行的中间列都有一个文本。第一行的中间列需要适合文本。但是当第二行有较长的文本时，第一行的中间列将不适合文本。上图更好的解释：

当第一行的文本较长时，它会正确匹配。

但是当第二行的文本比第一行的文本长时，第一行的列将不适合文本。如何使第一行中间列的宽度适合文本？

Answer 1

如果您希望顶部文本根据父元素的宽度（已被.second-text-middle内部文本扩展）扩展，您可以使用简单的 JavaScript。在这里，我们可以检查 和 的宽度，#n1并.first-text-middle增加 的font size: n%;，#n1直到它适合父级。fitWidth();&nbsp;window.addEventListener("resize", function() {&nbsp; fitWidth();&nbsp;&nbsp;});function fitWidth() {&nbsp; let first = document.querySelector('.first-text-middle');&nbsp; let firstText = document.getElementById('n1');&nbsp; let textSize = 100; // we will use it like a base 100% font-size later&nbsp;&nbsp;&nbsp; // set font size to '#n1'&nbsp;&nbsp;&nbsp; firstText.style.cssText = 'font-size:' + textSize + '%';&nbsp; while (first.clientWidth - 2 >= firstText.offsetWidth) {&nbsp; &nbsp; textSize = textSize + 1; //increments font size by 1% each loop&nbsp; &nbsp; firstText.style.cssText = 'font-size:' + textSize + '%';&nbsp; &nbsp; // basically in DOM you see only result of the very last loop of this 'while' statment&nbsp; &nbsp;&nbsp;&nbsp; }}html,body,.grid-container {&nbsp; height: 100%;&nbsp; margin: 0;}.grid-container {&nbsp; justify-content: center;&nbsp; display: grid;&nbsp; grid-template-columns: 10vmin min-content 10vmin;&nbsp; grid-template-rows: 1fr 1fr 1fr;&nbsp; gap: 0px 0px;&nbsp; grid-template-areas: "left middle right ""left first-text-middle right""second-text-left second-text-middle second-text-right";}.left {&nbsp; border: 1px solid red;&nbsp; grid-area: left;&nbsp; text-align: right;}.right {&nbsp; border: 1px solid red;&nbsp; grid-area: right;}.middle {&nbsp; border: 1px solid red;&nbsp; grid-area: middle;}.second-text-left {&nbsp; border: 1px solid red;&nbsp; grid-area: second-text-left;}.second-text-right {&nbsp; border: 1px solid red;&nbsp; grid-area: second-text-right;}.first-text-middle {&nbsp; border: 1px solid red;&nbsp; text-align: center;&nbsp; grid-area: first-text-middle;&nbsp; align-self: stretch;&nbsp; vertical-align: top;}.second-text-middle {&nbsp; border: 1px solid red;&nbsp; text-align: center;&nbsp; grid-area: second-text-middle;&nbsp; align-self: stretch;&nbsp; vertical-align: top;&nbsp; overflow: hidden;}<div class="grid-container">&nbsp; <div class="left"></div>&nbsp; <div class="middle"></div>&nbsp; <div class="right"></div>&nbsp; <div class="left"></div>&nbsp; <div class="first-text-middle">&nbsp; &nbsp; <span id="n1">Lorem</span>&nbsp; </div>&nbsp; <div class="second-text-left "></div>&nbsp; <div class="second-text-middle">&nbsp; &nbsp; <span id="n3">LoremIps</span>&nbsp; </div>&nbsp; <div class="second-text-right"></div></div>