Multi-Row Grids

With CSS tables we are not limited to just setting multiple adjacent columns to be the same height. We can also split the columns into multiple rows where each column splits in the same place. This allows us to set up full two dimensional grids which are ideal for those specific situations where we want part of the content of our web page set out following a very specific grid pattern.

The way that we do this is to use display:table-row to define each row of our grid. For example:

<div class="row">
<div class="col"></div>
<div class="col"></div>
;</div>
<div class="row">
<div class="col"></div>
<div class="col">
</div>
</div>

This gives us a grid of four divs (the ones with class="coll" arranged as two rows of two cells each. All the cells in a row have the same height and all the cells in a column have the same width. We can even make the cells all have the same width and height by assigning widths and heights as percentages of the overall table size. So to get our for cells to all have the same width and same height (but not necessarily with the width and height the same) we can use the following CSS.

.row {display;table-row;height:50%;}
.col {display;table-cell;width:50%;}

As with our earlier example on creating columns we do not necessarily need to have a div wrapped around our cells that had display:table since that will be assumed to be there if we omit it. The only time it would be necessary is if we want to apply further styles to our entire CSS table or where we have another CSS table adjacent to this one and need to distinguish which rows belong to which table.

Of course we are not limited to just having two rows or two columns in our CSS table. We can add extra rows simply by replicating the div structure for the existing rows as many times as we need to have rows. We can add extra columns simply by adding extra table-cells into each row of our table. The one restriction that applies to CSS tables that is different from HTML tables is that each row of a table must contain the same number of cells and each column of a table must also contain the same number of cells. Cells cannot span rows or columns in CSS tables (although there are ways to achieve that effect).

Where you do have more than two rows or columns you would not define the width and height as 50% since they then wouldn't fit the table. Instead you would need to define whatever the correct percentage is so that when multiplied by the number of columns or rows it fills 100% of the table.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate