CSS grid fit column width in one row

Question

I have a two row grid with three columns. Each row has a text in the middle column. The first row's middle column needs to fit to the text. But when there is a longer text in the second row, the first row's middle column won't fit to the text. A better explanation with pictures above:

When the first row's text is longer then it fits correctly.

But when the second row's text is longer than the first row's text, the first row's column won't fit the text. How can I fit the first row middle column's width to the text?

Here is

 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; }

 <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">LoremIps</span> </div> <div class="second-text-left "></div> <div class="second-text-middle"> <span id="n3">Lorem</span> </div> <div class="second-text-right"></div> </div>

Answer 1

If you want the top text to expand according to the width of the parent element (which has been expanded by the .second-text-middle inner text), you could use simple JavaScript.

Here we can check the width of #n1 and .first-text-middle , and increase the font size: n%; of #n1 until it fits the parent.

 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>