In this example we repeat a section of two columns 15px 30px for 3 times in a row. I mean in a column. Ahh! You know what I mean.

Spans

Using CSS grid spans you allow your items to stretch across multiple rows or columns. This is a lot like rowspan and colspan in a <table>.

We will create a grid using repeat to avoid redundant values. But it could have been created without it — anyway, let’s make it our specimen for this section.

When we add grid-column: span 3 to item #4 a somewhat unexpected effect has occurred:

Using grid-column span 3 to take up 3 columns. However, CSS grid makes a decision to remove some of the items, because the “spanned” item cannot fit into suggested area.

Using grid-column span 3 to take up 3 columns. However, CSS grid makes a decision to remove some of the items, because the “spanned” item cannot fit into suggested area.

In CSS grids spans can also be used to cover multiple rows. And if it so happened that the column is now greater in height than the height of the grid itself the CSS grid adapt itself to this:

CSS grid is adapting itself in several cases where items go beyond Grid’s parent container.

You can also span across multiple rows and columns at the same time. I created this other minimalistic example just to quickly demonstrate limitations, even though in most cases this will probably not happen:

CSS grid fills in the blanks.

Pay attention to how CSS grid adapts to the items around spans that cover multiple rows and columns. All of the items still remain in the grid but intuitively wrap around other spanned items.

When I tried to break the layout with a large span I ended up with the following case that demonstrates the key limitations of CSS grid:

CSS grid replaces potential item cells with empty space in two distinct situations.

But it’s still a lot like a <table>. See my other CSS grid vs table tutorial where I show you the frightening similarities.

However… there is a solution.

Start and End

So far we used CSS grid spans to create multi-column and multi-row items that occupy a ton of space. But… CSS grid has another much more elegant solution to solve the same problem.

The grid-row-start and grid-row-end properties can be used to define the starting and ending point of an item on the grid Likewise, their column equivalents are grid-column-start and grid-column-end. The are also two short-hand properties: grid-row: 1/2 and grid-column: 1/2.

These work an a slightly different way than spans.

With -start and -end properties, you can physically move your item to another location in the grid. Let’s take a look at this minimalist example:

Using CSS grid’s grid-row-start and grid-column-start on an item (first item in this example) you have the ability to physically move an item within your grid to another location!

Here we’ve taken item 8 and (redundantly) specified its location using grid-row-start and grid-column-start. Notice however, this alone has no effect on item 8, because item 8 is already positioned at that location on the grid anyway. However, by doing this you can achieve span-like functionality if you also specify an ending location using grid-column-end and grid-column-end.

Interestingly, designers of CSS grid have decided for the direction of the span vector to be insignificant. The span is still created within the specified area regardless of whether starting or ending points are provided in reverse order:

Specifying item span regardless of the direction of the start/end points produces the same results.

Let’s consider this 6 x 4 CSS grid. If you explicitly specify an items’s column end position that goes outside the number of specified columns (>=7) you will experience this wonky effect:

Making column width of an item greater than the original number of columns specified in the CSS grid.

In this case CSS grid will adapt the resulting layout of your grid to what you see in the example above. It’s usually a good idea to design your layouts by being mindful of grid’s boundaries to avoid these types of scenarios.

Start and End’s Shorthand

You can use the shorthand properties grid-row and grid-column to same effect as above using / to separate values. Except instead of providing an end value, it takes width or height of the span:

We can use / character for this short-hand syntax.

What if we need to reach the absolute maximum boundary of the grid?

Use -1 to extend a column (or row) all the way to the end of CSS grid’s size when number of columns or rows is unknown. But be mindful of any implicit items (16, 17) slipping away from the bottom of the grid:

Using negative -1 value to count from right-most gap to left.

Then I tried to do the same with rows, but the results were more chaotic, depending on which combinations of values I provided. I know there are other ways of using / but for the sake of clarity I want to keep things simple.

I only used 10 items in this example. CSS grid seems to gracefully resize itself.

When I was experimenting with rows to do the same thing, it seems like 4 in grid-column: 2/4 had to be changed to 2/6… but only if grid-row: 2/-1 was specified.

That puzzled me a bit. But I guess I still have a lot of learning to do on how /-separated values work.

What I found out though is that juggling around values here produced results that cannot be easily documented using visual diagrams.

Well, at least we get the basic idea here. You can extend either column or row all the way to the maximum boundary using -1. How one affects the other takes a bit of practice to figure out in some specific cases.

We can expand on this a bit. CSS grid has a secondary coordinate system, so to speak. And because it doesn’t matter which direction you use to make cross-column and cross-row spans you can use negative values:

Using negative values to specify column and row’s start and end, we can create the same span from previous examples, since CSS grid is coordinate system agnostic. You can use both positive and negative numbers!

As you can see CSS grid coordinate system is pretty flexible.

Content Align Within CSS Grid Items

Let’s say you’ve gone to the great lengths mastering CSS grid item spans. You crossed the seas of implicitly generated rows and columns. Now you’re curious to see what else is in store for you.

Good news for you then.

As a web designer, I’ve for a long time craved multi-directional float. I wanted to be able to float in the middle and on any corner of the container.

This functionality is only limited to CSS grids’ align-self and justify-self and does not appear to work on any other HTML element. If your entire site’s layout is built using a CSS grid then it solves a lot of issues associated with corner and center element placement.

align-self