Build Design Systems With Penpot Components
Penpot's new component system for building scalable design systems, emphasizing designer-developer collaboration.

CSS-Tricks | Manuel Matuzovic
A few weeks ago I held a CSS Grid Layout workshop. Since I’m, like most of us, also pretty new to the topic, I learned a lot while preparing the slides and demos.
I decided to share some of the stuff that was particularly interesting to me, with you.
Have fun!
In a lot of code examples and tutorials you will see that you can use grid-column-start: 1
and grid-column-end: -1
(or the shorthand grid-column: 1 / -1
) to span an element from the first line to the last. My friend Max made me aware that it’s possible to use lower values than -1
as well.
.grid-item {
grid-column: 1 / -2;
}
For example, you can set grid-column: 1 / -2
to span the cells between the first and the second to last line.
See the Pen Grid item from first to second to last by Manuel Matuzovic (@matuzo) on CodePen.
Another interesting thing about negative values is that you can use them on grid-column/row-start
as well. The difference between positive and negative values is that with negative values the placement will come from the opposite side. If you set grid-column-start: -2
the item will be placed on the second to last line.
.item {
grid-column-start: -3;
grid-row: -2;
}
See the Pen Negative values in grid-column/row-start by Manuel Matuzovic (@matuzo) on CodePen.
It may seem obvious that pseudo-elements generated with CSS become grid items if they’re within a grid container, but I wasn’t sure about that. So I created a quick demo to verify it. In the following Pen you can see that generated elements become grid- and flex-items if they are within a corresponding container.
See the Pen Experiment: Pseudo elements as grid items by Manuel Matuzovic (@matuzo) on CodePen.
According to the CSS Grid Layout Module Level 1 specification there are 5 animatable grid properties:
grid-gap
, grid-row-gap
, grid-column-gap
grid-template-columns
, grid-template-rows
Currently only the animation of grid-gap
, grid-row-gap
, grid-column-gap
is implemented and only in Firefox and Firefox Mobile. I wrote a post about animating CSS Grid Layout properties, where you’ll find some more details and a demo.
In level 4 of the CSS Grid Garden game I learned that the value of grid-column-end
or grid-row-end
may be lower than the respective start equivalent.
.item:first-child {
grid-column-end: 2;
grid-column-start: 4;
}
The item in the above code will start on the 4th line and end on the 2nd, or in other words, start on the 2nd line and end on the 4th.
See the Pen Lower grid-column-end value than grid-column-start by Manuel Matuzovic (@matuzo) on CodePen.
A grid item by default spans a single cell. If you want to change that, the span
keyword can be quite convenient. For example setting grid-column-start: 1
and grid-column-end: span 2
will make the grid item span two cells, from the first to the third line.
You can also use the span keyword with grid-column-start
. If you set grid-column-end: -1
and grid-column-start: span 2
the grid-item will be placed at the last line and span 2 cells, from the last to third to last line.
See the Pen CSS Grid Layout: span keyword by Manuel Matuzovic (@matuzo) on CodePen.
If you create template areas in a grid, you automatically get four implicit named lines, two naming the row-start
and row-end
and two for the column-start
and column-end
. By adding the -start
or -end
suffix to the name of the area, they’re applicable like any other named line.
.grid {
display: grid;
grid-template-columns: 1fr 200px 200px;
grid-template-areas:
"header header header"
"articles ads posts"
}
.footer {
grid-column-start: ads-start;
grid-column-end: posts-end;
}
See an example for implicit named lines in this Pen.
Support for CSS Grid Layout is pretty great since all major browsers, except IE and Edge, support it. For a lot of projects you can start using CSS Grid Layouts today. Support for Microsoft Edge will probably come pretty soon, because it’s already available in the insider version of Microsoft Edge.
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Chrome | Opera | Firefox | IE | Edge | Safari |
---|---|---|---|---|---|
57 | 44 | 52 | 11* | 16 | 10.1 |
iOS Safari | Opera Mobile | Opera Mini | Android | Android Chrome | Android Firefox |
---|---|---|---|---|---|
10.3 | No | No | 56 | 59 | 54 |
If you want to learn more about Grids check out The Complete Guide to Grid, Getting Started with CSS Grid, Grid By Example and my Collection of Grid demos on CodePen.
A Collection of Interesting Facts about CSS Grid Layout is a post from CSS-Tricks
AI-driven updates, curated by humans and hand-edited for the Prototypr community