Почему текстовое содержимое делает столбец шире?

Question

Я настраиваю видеопроигрыватель в CSS Grid, и, насколько я понимаю, не могу понять, почему ширина самой правой колонки сетки (одна с тремя разноцветными строками) увеличивается при добавлении текстового содержимого.

Я попытался установить для свойства overflow значение hidden, но ширина все еще изменяется.

Если я удаляю следующий код из HTML-разметки, столбец возвращается к желаемой ширине:

<div id="title">This Text</div>
<div id="location">is making this 3 row div</div>
<div id="date">wider for some reason</div>

Я хочу добавить текст в столбец без изменения ширины. Вероятно, это легко исправить. Спасибо за любую помощь!

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

Расширяя ширину всех столбцов 1fr, вы сообщаете браузеру, чтобы все они занимали одинаковое количество оставшегося свободного места на странице. То есть пространство, оставшееся после того, как ваши заполненные контентом столбцы заняли то, что им нужно.

Если вы хотите, чтобы столбцы занимали одинаковое количество места, независимо от того, что вы пытаетесь задать им ширину в vw единицах , чтобы сделать их ширину частью экрана, или процентами, чтобы сделать их ширину часть ширины их родителя.

Answer 2

Вот как вы определяете свой основной контейнер сетки:

.middle {
  display: grid;
  grid-template-areas: 'item1 item1 item1 item1 item2';
}

Вы создали сетку из пяти столбцов.

Однако вы не указали ширину для этих столбцов. Другими словами, вы не определили никаких значений для grid-template-columns.

В результате каждый столбец по умолчанию имеет ширину содержимого.

Поскольку столбец, о котором идет речь, имеет текстовое содержимое, в отличие от других столбцов, он шире.

Установить правило для одинаковой ширины. Добавьте это к своему коду:

.middle {
  display: grid;
  grid-template-areas: 'item1 item1 item1 item1 item2';
  grid-template-columns: repeat(5, 1fr); /* new */
}

пересмотренный кодекс

.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>

Answer 3

Дает ли он ожидаемый результат, если вы добавите grid-template-columns: 1fr 1fr 1fr 1fr 1fr; к вашему .middle классу?