CSS Grid-Layout Sucks, And Here's Why

So, recently, I've been playing around with CSS grid-layout, just to see how it is... and it's a nightmare to work with.

What is CSS grid-layout?

Before talking about why CSS grid-layout sucks, I want to briefly summarize what CSS grid-layout is and why it exists.

CSS grid-layout was originally proposed by Phil Cupp in 2011, since it can shorten code, reduce the amount of parent-child relationships, and make "more flexible" grids.

Why does CSS grid-layout suck?

In CSS, grids don't work in a way that I would consider intuitive.

For this section, I will use the following template when referencing a grid, where all four areas are proportionally sized:

h h h h
s c c c
s c c c
s f f f

This arrangement of letters represents a header that runs across the top, a sidebar, some content, and a footer.

Confusing Vocabulary

In CSS, a grid has three layers, so to speak – grid items, grid-cells, and grid-areas.

A "grid item" is the actual content in the grid, such as a <div>.

A "grid-cell" is the smallest unit of the grid itself – it is an area bordered by four grid-lines, two rowwise and two columnwise.

A "grid-area" is a named group of one or more grid-cells.

Sometimes, though, it feels like "grid-cell" and "grid-area" are used interchangeably when MDN Web Docs uses phrasing like the following: “More than one item can be placed into a grid cell or area and they can partially overlap each other.”.

Flow

Grid items in a grid-cell or grid-area have no flow, which means that if you try to put two <div>s in c, they will stack on top of eachother, instead of being placed and sized appropriately.

Cell/Area Sizing

Neither grid-cells nor grid-areas collapse any unused space, nor do they provide a way to – for example, shrinking the grid-item(s) to be smaller than the area will result in some wonky margins; compare the following three figures, A, B, and C.

A, the grid normally:

B, what the grid should look like with shrunken items:

C, what the grid actually looks like with shrunken items:



This can be fixed by using grid-template-columns and grid-template-rows respectively. — I used max-content for my code, and it seemed to work; however, I feel that isn't the correct solution.
[Let me know if using max-content for the sizing was the correct thing to do or not.]

Verbosity

Using grid-layout is a bit cumbersome, and somewhat obtuse.

To get the most out of CSS' grid-layout, you have to use grid-template-areas, grid-template-columns, and grid-template-rows together, or use the grid-row-* and grid-column-* properties.

For me, setting, and then maintaining, all these properties can be difficult – and it would be really nice if I could just use grid-template-areas and have the grid work exactly how I expect.

Not only is flex-layout easier, but it also has wider support, according to Can I Use.

Is grid-layout useless?

You might think that, with my critical views of CSS grid, I would think it has little to no use, but that guess would be wrong.

While I don't think grid-layout is particularly useful, I do think it could come in handy for grids with a higher complexity that is a necessary part of the design. — For example, you may want a logo in the top left, a header spanning the rest of the space, a sidebar, the main content, and then a footer – essentially, a modified version of the previous grid.

Here is a textual representation of the grid described above:

l h h h h
s s c c c
s s c c c
s s f f f

One good thing I definitely can say about grid-layout is that reduces the number of parent-child relationships you have to deal with, since flex-layout is one-dimensional, and thus the amount of elements you will likely need overall.

---

Thanks for reading!
Cheers!

Comments

[Ingo Steinke, web developer]

I find CSS grid helpful for complex layouts, and for restyling content where I have no control over the HTML markup. Otherwise, I prefer flex, which isn't perfectly intuitive either, even after I have been using it for a long time now. Thanks for your unique post!

[Calin Baenen]

I find CSS grid helpful for complex layouts

I did menrion that higher complexity layouts are a situation where grid-layout is useful.

and for restyling content where I have no control over the HTML markup

When is this a situation?
Could you please give an example?

Otherwise, I prefer flex, which isn't perfectly intuitive

While flex-layout is not perfect, I think it does its job, and grid-layout's job, in a much simpler and sensible mannee – there is no weird behavior I don't expect, and when there is a problem, the solution is pretty straightforward, unlike here, where I am not even sure if my solution was the correct one or not.

[Ingo Steinke, web developer]

and for restyling content where I have no control over the HTML markup

When is this a situation?

For example, content management systems and external third-party services sometimes emit markup beyond my control. Often, I could modify markup at least in theory, but that would require a higher level of control like writing a WordPress plugin only to change two lines of HTML, but sometimes it's hard-coded in another plugin or theme that did not provide a hook to filter their output or overwrite one of their components.