Why is text content making a column wider? - html

Question

I am setting up a video player in CSS Grid and for the life of me can't figure out why the width of the right most grid column (one with three multi-colored rows) increases when I add text content.
I have tried setting the overflow property to hidden but the width still changes.
If I remove the following code from the html markup, the column goes back to the desired width:
<div id="title">This Text</div>
<div id="location">is making this 3 row div</div>
<div id="date">wider for some reason</div>
I want to add text to the column without the width changing. Probably an easy fix. Thanks for any help!
https://codepen.io/Wcomp/pen/LKMrRK?editors=1100
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: 0;
outline: none;
user-select: none;
}
* {
margin: 0;
padding: 0;
user-select: none;
}
body {
display: block;
overflow: hidden;
height: 100vh;
background-color: darkblue;
}
.middle {
display: grid;
grid-template-areas: 'item1 item1 item1 item1 item2';
grid-column-gap: 3vh;
position: absolute;
width: 100%;
top: 23.3333666667%;
height: 53.3332667%;
border-left: 3vh solid transparent;
border-right: 3vh solid transparent;
}
.vid_player {
display: grid;
background-color: green;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 3vh;
left: 0%;
height: 100%;
width: 100%;
grid-area: item1;
}
.item {
background-color: white;
height: 100%;
width: 100%;
border-radius: 10px;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 100%;
width: 100%;
background-color: grey;
grid-area: item2;
}
#one {
background-color: aqua;
}
#two {
background-color: red;
}
#three {
background-color: yellow;
}
#title {
color: white;
font-family: arial;
font-size: 50px;
text-align: center;
}
#location {
color: white;
font-family: arial;
font-size: 30px;
text-align: center;
}
#date {
color: white;
font-family: arial;
font-size: 30px;
text-align: center;
}
<div class="middle">
<div class="vid_player">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div id="one">
<div id="title">This Text</div>
<div id="location">is making this 3 row div</div>
<div id="date">wider for some reason</div>
</div>
<div id="two"></div>
<div id="three"></div>
</div>
</div>

Answer 1

Does it give the expected result if you add grid-template-columns: 1fr 1fr 1fr 1fr 1fr; to your .middle class?

Answer 2

By making all of the columns 1fr wide, you are telling the browser to make all of them take up the same amount of remaining space left on the page. That is, the space left after your content-filled columns have taken up what they need.
If you want the columns to take up the same amount of space no matter what try giving them widths in vw units to make their width a fraction of the screen, or percents to make their width a fraction of their parent's width.

Answer 3

Here's how you define your primary grid container:
.middle {
display: grid;
grid-template-areas: 'item1 item1 item1 item1 item2';
}
You've created a grid with five columns.
However, you haven't specified a width for these columns. In other words, you haven't defined any values for grid-template-columns.
As a result, each column defaults to the width of its content.
Because the column in question has text content, unlike the other columns, it is wider.
Set a rule for equal widths. Add this to your code:
.middle {
display: grid;
grid-template-areas: 'item1 item1 item1 item1 item2';
grid-template-columns: repeat(5, 1fr); /* new */
}
revised codepen
.middle {
display: grid;
grid-template-areas: "item1 item1 item1 item1 item2";
grid-template-columns: repeat(5, 1fr); /* new */
grid-column-gap: 3vh;
position: absolute;
width: 100%;
top: 23.3333666667%;
height: 53.3332667%;
border-left: 3vh solid transparent;
border-right: 3vh solid transparent;
}
.vid_player {
display: grid;
background-color: green;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
grid-column-gap: 3vh;
left: 0%;
height: 100%;
width: 100%;
grid-area: item1;
}
.item {
background-color: white;
height: 100%;
width: 100%;
border-radius: 10px;
}
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
height: 100%;
width: 100%;
background-color: grey;
grid-area: item2;
}
#one {
background-color: aqua;
}
#two {
background-color: red;
}
#three {
background-color: yellow;
}
#title {
color: white;
font-family: arial;
font-size: 50px;
text-align: center;
}
#location {
color: white;
font-family: arial;
font-size: 30px;
text-align: center;
}
#date {
color: white;
font-family: arial;
font-size: 30px;
text-align: center;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*:focus {
outline: 0;
outline: none;
user-select: none;
}
* {
margin: 0;
padding: 0;
user-select: none;
}
body {
display: block;
overflow: hidden;
height: 100vh;
background-color: darkblue;
}
<div class="middle">
<div class="vid_player">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div class="container">
<div id="one">
<div id="title">This Text</div>
<div id="location">is making this 3 row div</div>
<div id="date">wider for some reason</div>
</div>
<div id="two"></div>
<div id="three"></div>
</div>
</div>