Предотвратить сетку с простым дополнением ⇐ CSS

[Anonymous]

Я написал небольшой сайт, который запрашивает экземпляр MongoDB, содержащий предшествующие попытки Brute-Force от IP, чтобы помочь с управлением брандмауэром. Первоначально написанный с макетом таблицы, я переписал сайт, чтобы использовать макет сетки. Схема страницы и CSS сетки следующие:
the-template использует альтернативные области:

PrettyPrint-Override ">

Код: Выделить всё

/* using alternative named grid areas */
.gridlayout {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: 50px auto auto 50px;
gap: 4px;
grid-template-areas:
"header header"
"left right"
"data data"
"footer footer";
}

header {
grid-area: header;
/* padding: 15px 15px 10px 15px; */
}

left {
grid-area: left;
/* overflow-y: scroll; */
min-height: 0;
min-width: 0;
}

right {
grid-area: right;
min-height: 0;
min-width: 0;
}

data {
grid-area: data;
}

footer {
grid-area: footer;
margin-top: 10px;
}

header, footer {
background-color: #22243E;
/* text-align: center; */
}

Контроль страниц находится в левой области, а область сетки также показывает/скрывает Divs с формами HTML, фрагментами информации, такими как конфигурация сайта (переменные пути/содержание), дамп PHP PRG $ _Session ['xxx'] и значения DataBase, и т. Д. В разделе данных показаны любые записи базы данных ответов в формате таблицы. Все это хорошо сработало без какого -либо пересчета сетки, показывая/скрывая информацию в области левой сетки и обновляя значения в правой области и области данных по мере необходимости.
Например, быстрый скриншот страницы:


Подробнее здесь: https://stackoverflow.com/questions/796 ... v-addition