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> </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: 2017/11/02 by leszek
