This is the next post in a series where I am explaining the CSS Grid specification, bit by bit. This time we are going to read the first section of the introduction. The introduction explains a lot of the concepts of grid layout and therefore this post touches on several things we will take a deeper look at later in this series.
The introduction starts with the statement, “This section is not normative”. If something is normative it is a formal part of the specification, the rules that authors and user agents must follow. If something is not normative then it is informative. It is useful information to explain and clarify, but shouldn’t be considered part of the formal specification.
Therefore the introduction is an informative part of the document, it serves to give an overview of grid layout.
Difference between Grid and Flexbox
Right at the top of the specification, in the introduction, is the answer to the first question everyone asks me about Grid.
What is the difference between grid and flexbox?
The main difference as described here is that Flexbox is single dimensional. This means it deals with the alignment of content in a single dimension – as a row OR as a column. Grid is two dimensional, it controls alignment in rows and columns at the same time.
This CodePen demonstrates the difference between flexbox and grid, one or two dimensions.
See the Pen Flexbox items vs grid items – 1d vs 2d by rachelandrew (@rachelandrew) on CodePen.
The introduction also mentions some of the features of Grid Layout that do not exist in Flexbox. For example the ability to position items on the two axes as shown in this next example where I am using line-based positioning to position items. The example also demonstrates that Grid Layout enables the layering of items, which Flexbox does not.
See the Pen Grid items with line-based positioning and layering by rachelandrew (@rachelandrew) on CodePen.
The final paragraph of this part of the introduction reads as follows:
Although many layouts can be expressed with either Grid or Flexbox, they each have their specialties. Grid enforces 2-dimensional alignment, uses a top-down approach to layout, allows explicit overlapping of items, and has more powerful spanning capabilities. Flexbox focuses on space distribution within an axis, uses a simpler bottom-up approach to layout, can use a content-size–based line-wrapping system to control its secondary axis, and relies on the underlying markup hierarchy to build more complex layouts. It is expected that both will be valuable and complementary tools for CSS authors.
Grid: enforces 2-dimensional alignment
This means that once you have a grid, things have to align to the grid. By using the ability of grid to span rows and columns, then using the Box Alignment properties to cause items to align to different positions in the grid area you can certainly get the effect of “breaking the grid”. Underneath it all is a strict, two dimensional grid.
In this next example, item two has a width and is aligned inside the grid area. The area itself however remains part of the grid.
See the Pen Using alignment to break the grid by rachelandrew (@rachelandrew) on CodePen.
Grid: a top-down approach to layout
This enforcement of 2-dimensional alignment creates a requirement to do the layout from the top down. We need to know what our grid is in order to enforce alignment based on that grid.
With grid you define your grid and items have to fit into it. There is the ability within grid layout to allow content to define the size of tracks. However, due to the strict two-dimensional grid, that sizing is going to size the entire track as in this very simple example. Later in this series we will look at all of the ways you might size these tracks.
See the Pen Grid tracks taking sizing from an item by rachelandrew (@rachelandrew) on CodePen.
Flexbox: a content size-based line-wrapping system
You can make a wrapped layout with flexbox, therefore laying things out in two dimensions. However alignment happens in a single dimension, based on the content size and available space in the main axis.
If you compare the following example to the grid example above, the sizing of the individual flex item does not change the sizing of items above it. If that is the type of layout you want, then you want to use Flexbox. When you want the strict grid of rows and columns, you need grid.
See the Pen Flex sizing does not change the column size by rachelandrew (@rachelandrew) on CodePen.
Flexbox: relies on the underlying markup hierarchy
This sentence points to the fact that when using Flexbox, your layout is more tightly coupled to the document order of elements. While there are certainly attempts to make flex grid which use order to get past this issue, it generally isn’t a wholly satisfactory way to work. Grid enables the placement of items, without reference to where they appear in the document order.
That said, it is important to remember that the accessibility of your documents relies on the logical order as described in the markup. If you find yourself using grid to change the order of items visually, check whether it makes more sense to do that in the source.
And, there is more
We’re not actually all of the way through the introduction. However, I hope these examples shed some light on grid layout and the reasoning behind the development of the specification. We’ll take a look at the examples in the next part of the introduction in my next post.