CODEWITHSUNDEEP
htmlcss
Corbin Spicer
Corbin Spicer

Reputation: 285

Advice - CSS Flexible Layout?

I have a web application which pulls in some information about meeting rooms, an instance of my program has a variable amount of rooms, these range from 1 to around 15 meeting rooms. The meeting rooms are stored in a database.

At the moment there is a fixed 9 x 9 grid.

The page MUST fit it on one 32" monitor (1080p)

Is it possible to use some CSS code to dynamically change the layout so no matter how many rooms there are they will fit onto one page?

Thanks for you help, screenshot of existing system below. enter image description here

.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;
}

I haven't posted all of this because it will take up a lot of space but hopefully you get the picture..

<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>

Upvotes: 0

Views: 89

Answers (1)

web-tiki
web-tiki

Reputation: 103760

This will make your grid 3*3 on a 1080p screen. On smaller screens, the rooms will display in 2 colums and on even smaller screens (less than 1280 px wide) 1 column.

You can change the number of columns for each screen size by changing the min-width

FIDDLE

CSS:

   .grid3x3 {
        text-align:center;

    }
    .grid3x3 > div {
        float:left;
        min-width:640px;
        width:33%;
    }

Upvotes: 2

Related Questions