Tables and web design development have a long and storied history. Originally, table tags in HTML were meant for the purpose of structuring numeric data on a page. As time passed, design developers started using table tags as a means to organize all of the content on a page. For awhile, that was a very accepted practice. Then CSS3 came along and provided a new means to organize your content on the page without using tables. The CSS3 method allowed developers to design pages with far less code than using table tags.
The tables have now turned (pun intended). If a developer wants to design a table or grid in CSS3, they will find themselves using about the same amount of code as if they were using table tags, which means they might as well go back to HTML 4. This, however, will eventually change again as the W3C is currently drafting a Grid element. The latest draft is from April 2011.
After testing what has been developed so far, it does not appear that Firefox is currently supporting the Grid element. However, it’s worth learning about now as the code will be a powerful design tool. Also, it’s worth noting that the Grid element will not be solely focused as a means to present numerical data, but as a means to design an entire page. In a matter of speaking, you could say that HTML table tags are on the endangered species list–if they are not dead now, they will be in a matter of time.
This article will dive into the current proposal of the Grid element and provide a sneak peak into what is coming down the development pipeline.
The CSS3 Grid Element
So, why a Grid element? The easy answer is that floats are not the best answer for laying out applications. Currently, many developers are still using a combination of tables, JavaScript and complex floated elements. The Grid element eliminates the need for all of this using minimal amounts of code. The Grid element also allows for different sizing requirements. As design developers know, you are no longer designing for a one-size-fits-all world. The Grid element will allow for sizing behaviors, including mobile. When the more forward thinking browsers start accepting the Grid element, a whole new set of abilities to design pages and applications will open up.
The W3C has several sets of example code available for you to digest, but they are not quite yet ready to use. Here’s the first example, which will then be broken down:
#grid {
display: grid;
grid-columns: auto minmax(min-content, 1fr);
grid-rows: auto minmax(min-content, 1fr) auto
}
While there will be many ways to specify the structure of the grid, the above code shows a means to achieve all the sizing, placement, and alignment rules declaratively using the grid-columns and grid-rows properties.
For ease of definition, it appears that auto, minmax, min-content is all defined within each other. The W3C explains it this way:
Where:
- fraction is a non-negative floating-point number followed by ‘fr’. Each fraction value takes a share of the remaining space proportional to its number.
- max-content is a keyword which refers to the maximum of the max sizes of Grid Items occupying the Grid Track.
- min-content is a keyword which refers to the maximum of the min sizes of Grid Items occupying the Grid Track.
- minmax(min, max) defines a size range. The size used should be greater than or equal to min and less than or equal to max. If max < min, then max is ignored and minmax(min,max) is treated as minmax(min,min).
- fit-content is equivalent to minmax(min-content, max-content).
- auto is quivalent to fit-content.
This is not simple and it can appear intimidating. It will take some math skills and a lot of trial and error to figure it all out. But, once you do manage to get the code working for you, you will have mastered a new set of code skills that you can use to create complex design elements using a minimum amount of code.
Grid Tracks, Grid Lines and Grid Cells
You might notice that the term Grid Tracks is used quite a bit in the above definitions. The W3C is defining Grid Tracks as, “…the columns and rows of the Grid defined with the grid-rows and grid-columns properties on the Grid element. Each Track is defined by declaring a sequential list of sizing functions, one for each Track. Tracks define the space between Grid Lines.”
Where Grid Lines are, “…the horizontal or vertical dividing lines that exist on either side of a column or row.” You will be able to define and/or assign strings to Grid Lines or simply refer to them by their number.
Let’s now go back to some code examples:
#row1 { grid-column: 1; grid-row: 1 }
#row3 { grid-column: 1; grid-row: 3 }
#row2 { grid-column: 1; grid-row: 2; grid-row-align: start }
#column2row1 { grid-column: 2; grid-row: 1; grid-row-span: 2 }
#column2row2 { grid-column: 2; grid-row: 2; grid-column-align: center }
By looking at these examples, you can see how you start to define rows and columns. Just like in table tags, you can span rows and use a center alignment. It definitely appears that the W3C is including all the bells and whistles and then some.
Earlier in the article it was mentioned that the Grid Element will feature sizing behavior elements. For those of you with handheld devices, you know that you typically switch between portrait and landscape views. The Grid Element will accommodate for this through media queries.
@media (orientation: portrait) or @media (orientation: landscape)
This means that, yes, you’ll need to code for two different orientations. But that’s not a negative in that you have to double your coding efforts; it’s a positive in that you can double your design features.
In addition to Grid Tracks and Grid Lines, there will also be Grid Cells. Here is some code examples, again, taken from the W3C:
#grid::grid-cell(“cell”) {
grid-column: “cell-start” “cell-end”;
grid-row: “cell-start” “cell-end”
}
#item2 { grid-cell: “cell” }
#item3 { grid-cell: “cell” }
The W3C describes Grid Cells as, “…the logical space used to lay out one or more Grid Items.” The quote is cut off early in an effort to keep things sounding simple. The rest of the definition branches off into a discussion of several other elements and properties all related to the Grid Element.
Conclusion
Hopefully, this provides a taste of what is coming in the future for CSS3 and website design. In some regards, this one element alone might be like learning a whole new coding language, but that’s what keeps things fresh and interesting. The plus side is that after browsers start to support it and you do learn it, you’ll have a very marketable skill. You can learn more at the W3C site.
