React Responsive Web Design/Container

Question

I am creating a website to display data usage but when i resize the window, the page is not responsive at all. Is there any way I can add a responsive wrapper or CSS style to this so it is responsive if I made the window smaller? Also if there is a way to add a convertion from MB to GB after a certain amount of number it will also reduce the length of the number.

Here is the original code:

                    <Row className="box-container">

                <div className="box" >
                        {this.props.loading?this.renderSpinner():null}
                        {textDisplay}
                        <Row>
                            <p>Active </p>
                        </Row>
                        <Row>
                            <p>Inactive </p>
                        </Row>
                        <Row>
                            <p>Suspend </p>
                        </Row>
                </div>


                    <div className="box">
                        Current Period Usage
                        {this.props.loading?this.renderSpinner():null}
                    <h2>17777777777777777777777777777777777777777777777777MB</h2>
                    </div>


                    <div className="box">
                        Added This Period
                    </div>
            </Row>

And the CSS file looks like this:

.box-container{
    margin: auto;
    width:85%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
    grid-template-rows: minmax(auto, auto);
    grid-auto-flow: dense;
    grid-gap:20px
}
.box-container .box {
    border-radius: 15px;
    border: 3px solid black;
    padding: 20px;
    display: grid;
    place-items: center;
    text-align: center;
    grid-column: unset;
    grid-row: unset;
}

and When I reduced the size of the window:

Answer 1

use word-break: https://developer.mozilla.org/en-US/docs/Web/CSS/word-break. In CSS stylesheet add the word-break