Simple Grid With Alternating Rows

Introduction

This is a simple demonstration of how you can have some easy grids with alternating rows. In this example you have one row with three items and one row with two.
This is a 100% CSS solutions and boils down to using @property for the span value of the grid-columns property.

How it works

Well it's simple. You need to know how many different rows there will be and how many total items these different rows contain.

In my example this would be:

• 2 different rows
• 3 items 2 items = 5 items

This means when doing the :nth-child() selector you have to use that total number:

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --col-span: 4;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --col-span: 6;
}

The col-span custom property is used like this:

.item {
    ...
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
    ...
}

And that's pretty much it. It's super simple, nothing major, but still useful for everyone.

A More Designer-Friendly But More Complex Solution

For a more designer-friendly solution, I thought declaring the actual amount of items instead changing the span, because if you change the number of columns in a grid, but forget to adjust the spans, you get an undesirable effect. That is why I added another custom property and change that instead.

The most unfortunate part, regardless which solution you go for, the nth-child selector needs to be changed manually, or via JavaScript, if you want a fully dynamic solution. (You can also use SASS / SCSS, which is obviously a good way as well)

The newly added property looks like this:

@property --row-items {
  syntax: "<integer>";
  inherits: false;
  initial-value: 1;
}

For the items you can change the value of the property --row-items

&:nth-child(5n - 4), 
&:nth-child(5n - 4) ~ &:is(:nth-child(5n - 3), :nth-child(5n - 2)) {
    --row-items: 3;
}

&:nth-child(5n - 1), &:nth-child(5n - 1) ~ &:nth-child(5n) {
    --row-items: 2;
}

And the span-cols are now calculated on the .item class directly, instead of selecting x.

.item {
    --span-cols: calc(var(--grid-cols) / var(--row-items));
    grid-column: span var(--span-cols);
    grid-row: span var(--span-rows);
}

For reference the columns and rows custom properties are declared as the following:

@property --grid-cols {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

@property --grid-rows {
  syntax: "<integer>";
  inherits: false;
  initial-value: 12;
}

Conclusion

I hope this helps you understand how to make this kind of grid work.
If you find any errors, or have any kind of feedback for me, write a comment on this post!

Thanks and I wish you a nice weekend,
Kuraikari

Original Pen

The Pen with the items property

The above is the detailed content of Simple Grid With Alternating Rows. For more information, please follow other related articles on the PHP Chinese website!