DEV Community: Kuraikari

Simple Grid With Alternating Rows

Kuraikari — Fri, 06 Dec 2024 09:00:38 +0000

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

Dynamic Grid-Layout with Custom Properties and Resizable Elements (@properties)

Kuraikari — Thu, 05 Dec 2024 15:57:48 +0000

Copied information from the CodePen:

Grid using custom properties for columns and rows. It also features are drag to resize, using a simple drag-handle. The resize is snapped to the grid spans.

Browser support baseline-status added for transparency.

Here's the revised version of the DEV.to post with code blocks added for key parts:

Grid with Custom Properties and Resizable Elements

Hello, DEV community! 👋

I've been experimenting with CSS grids lately, and I want to share a fun project: Grid with Custom Properties and Resizable Elements. This pen started as an attempt to create a Bento-style grid but evolved into something more dynamic, featuring customizable grid dimensions and draggable resizable elements. While there's room to grow (drag-to-reorder is next on my list!), I’m excited about what’s already possible with this setup.

Let’s break it down! 🎉

🛠️ How It Works

@property

I used the @property at-rule to define custom properties, which add type safety and control inheritance. Here’s an example from the project:

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

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

@property --col-span {
  syntax: "<integer>";
  inherits: false;
  initial-value: 2;
}

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

These properties allow the grid layout to be dynamically adjusted with minimal effort, whether via CSS or JavaScript. For example, you can set the grid structure with:

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  gap: var(--grid-gap);
}

Drag-to-Resize

Each grid element has a draggable corner handle that lets users resize the element while snapping it to the grid. The drag-handle is styled like this:

.grid-element .drag-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 20px;
  height: 20px;
  background: skyblue;
  border-radius: 50%;
  cursor: nwse-resize;
}

The resizing logic is implemented in JavaScript, snapping the size of the element to grid spans. Here’s a simplified snippet of how resizing works:

dragHandle.addEventListener('mousedown', (event) => {
  const startX = event.clientX;
  const startY = event.clientY;

  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);

  function onMouseMove(e) {
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    // Calculate new spans based on the grid dimensions
    const colSpan = Math.max(1, Math.round(deltaX / gridCellWidth));
    const rowSpan = Math.max(1, Math.round(deltaY / gridCellHeight));

    gridElement.style.gridColumnEnd = `span ${colSpan}`;
    gridElement.style.gridRowEnd = `span ${rowSpan}`;
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});

col-span and row-span

The custom properties --col-span and --row-span control the default size of each grid item. Here’s how they’re applied:

.grid-element {
  grid-column: span var(--col-span);
  grid-row: span var(--row-span);
}

This approach simplifies styling and makes it easy to dynamically add or resize elements programmatically.

Test it out yourself!

📌 Conclusion

This project showcases the power of modern CSS combined with some light JavaScript to create interactive and dynamic layouts. By using @property and CSS grid features, we’ve created a foundation for a customizable, resizable grid system.

Future plans include adding drag-to-reorder functionality so users can rearrange elements, making the grid even more interactive.

For transparency, I’ve included baseline-status elements to show browser support for the experimental features used.

📚 Resources

Here are some helpful links to learn more about the CSS features used in this project:

MDN: @property
MDN: CSS Grid Layout
MDN: Cascade Layers
MDN: Starting Styles
MDN: Relative Colors: Simplify color adjustments directly in CSS.
MDN: Logical Properties: Write direction-agnostic CSS for multi-language support.
MDN: Container Queries: Adapt layouts based on a container's size rather than the viewport.
MDN: currentColor Keyword: Use the current text color in other CSS properties like borders or backgrounds.
MDN: -web-kit-Line Clamp: Control the maximum number of lines displayed in a block element.
MDN: Transition Behavior - Allow-Discrete: Define how discrete values change during transitions.

I’d love to hear your feedback or ideas for further improvements! Let me know what you think in the comments, or feel free to fork the Pen and make it your own. 😊

Happy coding! 💻✨