Проблемы с быстродействием: как остановить перемещение элемента сетки при изменении размера экрана?

Question

Я работаю над веб-страницей на основе реакции, которая имеет две смежные сетки на домашней странице (каждая сетка содержит от 5 до 10 квадратов). Вот проблема: сетка слева (управляемая .tile-containter в файле CSS) правильно масштабируется при уменьшении ширины экрана браузера. Однако сетка рядом с ней (управляемая .tile-container-onNext ) превращается в беспорядок, когда ширина экрана уменьшается - сетка и соответствующий заголовок сетки в конечном итоге перекрываются друг с другом, а также перекрываются с соседней сеткой. Есть ли предложения о том, как правильно масштабировать обе сетки, чтобы они не сталкивались друг с другом при уменьшении ширины? Я приложил скриншоты до и после усадки; Я также включил следующий код:

Левая сетка TileList.jsx

import React from 'react'
import Tile from './Tile'

const TileList = (props) => {
    return (
        <>
         <h1 className = 'h1-pouring'>Currently Pouring:</h1> 
        <div className = 'tile-container'>
            {
                props.beerList.children &&
                props.beerList.children.length &&
                props.beerList.children[0].children.map(product => {
                     return <Tile product = {product}/>

                })
            } 
        </div> 
        </>
    )
}

export default TileList

Правая сетка OnNextList.jsx

import React from 'react'
import OnNextTile from './OnNextTile'

const OnNextList = (props) => {
    return (
        <>
         <h1 className = 'h1-pouring-onNext'>On Tap Next:</h1> 
        <div className = 'tile-container-onNext'>
            {
                props.beerList.children &&
                props.beerList.children.length &&
                props.beerList.children[0].children.map(product => {
                     return <OnNextTile product = {product}/>
                })
            } 
        </div> 
        </>
    )
}

export default OnNextList

CSS:

html * {
    box-sizing: border-box;
}

body {
    margin: 0px;
    padding:0;
    background-image: linear-gradient(to top, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.8)), url('https://www.hashigozake.co.nz/images/newphotos/Hashigo%20Zake-800-52.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: brightness(90%);
}


img {
    max-width: 40%;
    height: auto;
}



/* Home */
/* Tap list display */

.tile-container {
    display:grid;
    margin:auto;
    /* justify-content: center; */
    width:25%;
    height:auto;
    grid-row-gap:10px;
    grid-column-gap:10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr fr 1fr 1fr ;
    margin-top:50px;
    transform: translateX(-90%);
}

.tile-container-onNext {
    display:grid;
    margin:auto;
    /* justify-content: center; */
    width:25%;
    height:auto;
    grid-row-gap:10px;
    grid-column-gap:10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr fr 1fr 1fr;
    transform: translateX(78%) translateY(-216%);
    min-width:500px;
    
}

.tile {
    width:100%;
    height:auto;
    font-size:10px;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    border: 1px solid white;
    padding-left:3px;
}

Перед усадкой