Matthew on the Field
Matthew on the Field

What is CSS Grid?

CSS Grid is a two-dimentional layout model for displaying the content of a web page. The Grid is applied to the content strictly using CSS, therefore isolating the content in the HTML from the presentation of the content. Simply create the HTML content, wrapping the content in containers. Identify those containers via classes. It is through those class designations that CSS magically places the content where you want it to display.

You can define a CSS Grid within a Grid Layout, not as a sub-grid, but a nested grid. Sub-grids are part of level 2 of CSS Grid, with level 2 currently in the process of being specified, As such, it is not readily available in browsers. Ultimately, a sub-grid will inhereit the properties from the parent grid. But for now, we only have nested grids, where everything needs to be specified in both grids.

A similar CSS construct is CSS FlexBox. Flexbox is a one-deminsional layout model. There are two aixs in Flexbox, the main-axis and the cross-axis. The main-axis runs along the row in the inline direction either left-to-right or top-to-bottom, depending on how you define it. The cross-axis runs perpendicular to the main-axis. Flexbox is created by defining a flex container, all of the children of the flex container will inhereit the properties of the parent. In a nut shell, items flex to fill additional space and shrink to fill smaller spaces.

Both CSS Grid and CSS Flexbox can be used together. For more information on CSS Grid Layout vs CSS FlexBox: CSS Grid vs FlexBox and why you should use both of them.

More on CSS Grid

The default way to position the content within their containing grid, is to specify the start and stop lines. Another way is to define grid-areas with names and then place the content there using those names. What makes CSS grid so powerful is that it can alter the presentation dynamically using methods such as focus or hover. When the containing grid is dynamically altered, all surrounding containing grids alter what they present to accomodate the dynamic change. All the while maintaining the integrity of the grid.

There are a lot of features and ways to implement CSS Grid, use this handy Cheat Sheet as a visual way to keep things in mind.

Before CSS Grid

Prior to CSS Grid and FlexBox, if you wanted to display the content in interesting ways such as columns, especially stagering the columns, you had to manipulate the CSS in order to get the presentation you wanted. To accomplish this, start by defining all sorts of containers, wrapping those containers around your content. Then in the CSS you would go through jirations to get the desired results:

Block: for sections of the web page.

Inline: for the text.

Table: to define a two dimentional table data.

and lastly you had to Position: the content where you wanted it. And don't forget to adjust the margins and padding to get the content to display just as you wanted it.

Hardly flexible and definately not dynamic. It brought on a whole new perspective when trying to add responsiveness to your web page. Positioned well for a desk top, but then bring it up on a smart phone. Start over.

Care to read more on life before CSS Grid? Check out the CSS Grid Complete Guide.