User Tools

Site Tools


notes:css:grid

Grid in CSS

Example: A grid made of a table HTML element:

<html>
<head>
    <style type="text/css">
    #WbsBody
    {
        background-color:   #ADC3EF;
    }
 
    #WbsPanel
    {
        background-color:   #EEF0F6;
        padding:            5px;
        margin:             15px;
        border:             1px solid #638AD6;
    }
 
    #WbsGrid
    {
        width:              100%;
        border-collapse:    collapse;
        border:             1px solid #466094;
    }
 
    #WbsGrid tr
    {
   	    font-family:        Tahoma;
        font-size:          8pt;
        color:              #000000;
    }
 
    #WbsGridTopBar
    {
        height:             25px;
        border:             1px solid #466094;
    }
 
    #WbsGridTopBar table
    {
        width:              100%;
        border:             0px solid transparent;
    }
 
    #WbsGridTopBar tr
    {
        height:             25px;
    }
 
    #WbsGridTopBar td[title=refresh]
    {
        width:              10%; 
        padding-right:      8px;
        white-space:        nowrap;
        text-align:         right;
    }
 
    #WbsGrid div.overflow
    {
        overflow:           auto;
        overflow-x:         hidden;
        -ms-overflow-x:     hidden;
    }
 
 
    #WbsGrid tr.header
    {
        height:             21px;
        background-color:   #E0E3E8;
        table-layout:       fixed;
        padding-left:       3px;
        padding-right:      3px;
    }
 
    #WbsGrid tr.header td.sep
    {
        background-image:   url(barline.gif);
        background-repeat:  no-repeat;
        background-position:center;
    }
 
    #WbsGrid tr.headersep
    {
        height:             1px; 
        background-color:   #A0A0A4;
    }
 
    #WbsGrid tr.item
    {
        height:             25px;
        cursor:             default;
    }
 
    #WbsGrid tr.item-selected
    {
        height:             25px;
        cursor:             default;
        color:              White !important;
        background-color:   #5A7DBD;
    }
 
    #WbsGrid tr.item td
    {
        padding-left:       3px;
        padding-right:      3px;
    }
 
    #WbsGrid tr.itemsep
    {
        height:             1px; 
        background-color:   #CDD4E3;
    }   
    </style>
 
</head>
    <body id="WbsBody">
 
        <div id="WbsPanel">
            <table id="WbsGrid" cellpadding="0" cellspacing="0">
                <tr>
                    <td id="WbsGridTopBar">
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td title="refresh">
                                    <img alt="Refresh" src="refresh.gif" />
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <!-- Header -->
                            <colgroup>
                                <col width="40" />
                                <col width="5" />
                                <col width="180" />
                                <col width="5" />
                                <col width="200" />
                                <col width="5" />
                                <col />  <!-- filler -->
                            </colgroup>
                            <tr class="header">
                                <td align="center">ID</td>
                                <td class="sep" width="5"></td>
                                <td align="center">Name</td>
                                <td class="sep" width="5"></td>
                                <td align="center">Occupation</td>
                                <td class="sep" width="5"></td>
                                <td>&nbsp;</td>  <!-- filler -->
                            </tr>
                            <tr class="headersep"><td colspan="8"></td></tr>
                        </table>
                        <div class="overflow" style="height:160px">
                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <colgroup>
                                    <col width="40" />
                                    <col width="5" />
                                    <col width="180" />
                                    <col width="5" />
                                    <col width="200" />
                                    <col width="5" />
                                    <col />  <!-- filler -->
                                </colgroup>
                                <!-- Item #1 -->
                                <tr class="item">
                                    <td align="center">1</td>
                                    <td width="5"></td>
                                    <td align="left">Maurycy Burak</td>
                                    <td width="5"></td>
                                    <td align="left">Software Engineer</td>
                                    <td width="5"></td>
                                    <td></td> <!-- filler -->
                                </tr>
                                <tr class="itemsep"><td colspan="7"></td></tr>
                                <!-- Item #2 -->
                                <tr class="item">
                                    <td align="center">2</td>
                                    <td></td>
                                    <td>Grucha Michael</td>
                                    <td></td>
                                    <td>Accountant</td>
                                    <td></td>
                                    <td></td> <!-- filler -->
                                </tr>
                                <tr class="itemsep"><td colspan="7"></td></tr>
                                <!-- Item #3 -->
                                <tr class="item">
                                    <td align="center">3</td>
                                    <td></td>
                                    <td>Wasyl Krasny</td>
                                    <td></td>
                                    <td>Unemloyed</td>
                                    <td></td>
                                    <td></td> <!-- filler -->
                                </tr>
                                <tr class="itemsep"><td colspan="7"></td></tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>

Assets:

Filename
Refresh.gif
BarLine.gif

Example: A flexible two-column grid made of div elements. The flexible grid stacks its cells when the browser window is too narrow to fit both columns:

<html>
    <head>
        <style type="text/css">
        .flexiblegrid div.row 
        { 
            clear: both; 
            overflow: hidden;
        }
 
        .flexiblegrid div.cell
        { 
            float: left; 
            min-width: 200px; 
            min-height: 60px;
            padding: 0px;
        }
 
        .flexiblegrid div.center
        { 
            text-align:center;
        }
 
        .flexiblegrid div.left
        { 
            text-align:left;
        } 
        </style>
    </head>
 
    <body>
 
        <!-- example #1 -->
        <div class="flexiblegrid">
            <div class="row">
                <div class="cell left">
                    Text1<br />
                    Text2<br />
                    Text3<br />
                </div>
                <div class="cell left">
                    Text4<br />
                    Text5<br />
                    Text6<br />
                </div>
            </div>
        </div>
 
        <!-- example #2 -->
        <div class="flexiblegrid">
            <div class="row">
                <div class="cell center">
                    <a href="http://wbswiki.com">Link1</a><br />
                    <img src="image1.png" border="1" />
                </div>
                <div class="cell center">
                    <a href="http://wbswiki.com">Link2</a><br />
                    <img src="image2.png" border="1" />
                </div>
            </div>
            <div class="row">
                <div class="cell center">
                    <a href="http://wbswiki.com">Link3</a><br />
                    <img src="image3.png" border="1" />
                </div>
                <div class="cell center">
                    <a href="http://wbswiki.com">Link4</a><br />
                    <img src="image4.png" border="1" />
                </div>
            </div>
        </div>
 
    </body>
</html>

Example: A fixed 2 by 2 grid made of div elements. The fixed grid resizes its rows and columns but does not stack them like the flexible grid:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        /* some ideas taken from 
            http://www.quirksmode.org/css/clearing.html */
        #fixedgrid div.row
        {
            overflow: hidden;
            width: 100%;
        }
 
        #fixedgrid div.left, div.right
        {
            width: 50%;
            text-align: center;
        }
 
        #fixedgrid div.left 
        {
            float: left;
        }
 
        #fixedgrid div.right
        {
            float: right;
        }
 
        #fixedgrid div.content
        {
            margin: 5px;
            padding: 10px;
            background-color: #F0F0F0;
            height: 300px;
        }
        </style>
    </head>
 
    <body>
        <div id="fixedgrid">
            <div class="row">
                <div class="left">
                    <div class="content">
                        <a href="http://wbswiki.com">Link1</a><br />
                        <img src="image1.png" border="1" />
                    </div>
                </div>
                <div class="right">
                    <div class="content">
                        <a href="http://wbswiki.com">Link2</a><br />
                        <img src="image2.png" border="1" />
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="left">
                    <div class="content">
                        <a href="http://wbswiki.com">Link3</a><br />
                        <img src="image3.png" border="1" />
                    </div>
                </div>
                <div class="right">
                    <div class="content">
                        <a href="http://wbswiki.com">Link4</a><br />
                        <img src="image4.png" border="1" />
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
notes/css/grid.txt · Last modified: 2016/09/29 by admin