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.
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.
Cheers!
Top comments (3)
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!
I did menrion that higher complexity layouts are a situation where
grid
-layout is useful.When is this a situation?
Could you please give an example?
While
flex
-layout is not perfect, I think it does its job, andgrid
-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.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.