Я использую React Bootstrap и CSS Grid. Индикатор выполнения слишком мал, когда он у меня есть в сетке, но отлично работает где-то еще. 
Я не знаю, связана ли проблема с React bootstrap, или, может быть, CSS сетка мешает ширине индикатора выполнения
Вот исходный код. Я чувствую, что ширина полосы прямо пропорциональна количеству столбцов. Если это так, то как объединить столбцы в один?
// JSX
<div className="item2">
<Combat />
</div>
<div className="item3 w-100">
<p>Progressbar</p>
<ProgressBar
variant="length"
now={increment}
label={`${increment}`}
/>
<p>{storeMoves}</p>
</div>
<div className="item4">details</div>
<div className="item5">profile-left</div>
<div className="item6">profile-right</div>
</Modal.Body>
<Modal.Footer>
<Button variant="primary" onClick={close}>
Save Changes
</Button>
CSS
.item1 {
grid-area: image;
height: 250px;
}
.item1 img {
max-height: 80px;
}
.item2 {
grid-area: stats;
height: 250px;
}
.item3 {
display: flex;
flex-direction: column;
grid-area: progressBar;
height: 250px;
}
.item4 {
grid-area: details;
height: 10px;
}
.grid-container {
display: grid;
grid-template-areas:
"image image stats progressBar progressBar progressBar"
"details details details details details details"
"profile-left profile-left profile-left profile-right profile-right profile-right";
grid-gap: 2px;
background-color: #fff;
}
.grid-container > div {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 20px 0;
background-color: rgb(230, 228, 228);
}