Совет - CSS гибкий макет?

У меня есть веб-приложение, которое содержит некоторую информацию о конференц-залах, экземпляр моей программы имеет переменное количество комнат, они варьируются от 1 до 15 конференц-залов. Залы заседаний хранятся в базе данных.

На данный момент существует фиксированная сетка 9 x 9.

Страница ДОЛЖНА поместиться на одном 32-дюймовом мониторе (1080p)

Можно ли использовать некоторый CSS-код для динамического изменения макета, поэтому независимо от того, сколько комнат там они будут вписываться в одну страницу?

Спасибо за помощь, снимок экрана существующей системы ниже.

.grid3x3 {
    display:table;
    height:85%; /*Leave some space for the title*/
    width:99%;  /*Should equal div width times number of columns*/
    position:absolute;
    text-align:center;
    top: 100px;
    left:10px;

}
.grid3x3 > div {
    display:table-row;
    width:100%;
}

.grid3x3 > div > div {
    display:table-cell;

}

div {

height:33%;/*Change these to 100% divided by number of rows/columns that you have put in*/
width:33%; /*Change these to 100% divided by number of rows/columns that you have put in*/
}



#footer {
    width: 100%;
    text-align:center;
}

Я не написал все это, потому что это займет много места, но, надеюсь, вы получите картину.

<div class="grid3x3">
<div>
<div>
<h2> COM Meeting Room  <asp:Label runat="server" id="COMS"></asp:Label></h2>
<asp:Label runat="server" id="COMSMtgs"></asp:Label>
</div>
</div>
</div>