Init

Description:
The function changes the element’s display style to “grid”, allowing the element to adopt CSS grid layout properties.

{
    "type": "css-grid",
    "action": "init",
    "args": {
        "element": "#my-grid"
    }
}

Enable resize manager

Description:
The code imports the grid resize manager, instantiates it, and then proceeds to initialize the instance.

{
    "type": "css-grid",
    "action": "enable_resize",
    "args": {
      "element": "#my-grid",
      "options": {
          "min": {
              "width": 100,
              "height": 100
          },
          "max": {
              "width": 500,
              "height": 500
          }
       }              
    }
}

Disable resize manager

Description:
If you have a resize manager enabled, you dan disable that again using this call.

{
    "type": "css-grid",
    "action": "disable_resize",
    "args": {
        "element": "#my-grid"
    }
}

Auto fill element

Description:
This automatically generates a css grid, populating it with cells that each have a unique ID, based on the specified number of columns and rows.

This process constructs a grid composed of cells, each assigned a distinct ID. Every cell is a ‘div’ element, labeled with the class “grid-cell” and an ID in the format “grid-cell–“. These cells are nested within the parent element specified by the ‘element’ argument in the step. Each cell is styled with a 1px solid black border. Additionally, the CSS variable --grid-cell-width is defined as the width of the parent element divided by the total number of columns.

{
    "type": "css-grid",
    "action": "auto_fill",
    "args": {
        "element": "#my-grid",
        "columns": "3",
        "rows": "3"
    }
}

Set columns

Description:
Assign the value of the columns argument to the CSS grid template columns property of the element specified by the element argument.

{
    "type": "css-grid",
    "action": "set_columns",
    "args": {
        "element": "#my-grid",
        "columns": "repeat(3, 1fr)"
    }
}

Set rows

Description:
The assigns the value of the rows argument to the grid-template-rows property of the element identified by the element argument.

{
    "type": "css-grid",
    "action": "set_rows",
    "args": {
        "element": "#my-grid",
        "rows": "repeat(3, 1fr)"
    }
}

Add columns

Description:
Add columns to a specified element at a designated position. It also enables the application of a count to multiple columns simultaneously.

{
    "type": "css-grid",
    "action": "add_column",
    "args": {
        "element": "#my-grid",
        "position": "front",
        "width": "1fr"
    }
}

The position value can be:

1. “front”
2. “back”
3. numeric column position index value.

Remove all columns

Description:
Eliminates a column or multiple columns from the grid of the designated element at the specified location.

{
    "type": "css-grid",
    "action": "add_column",
    "args": {
        "element": "#my-grid",
        "position": "front",
        "count": 1
    }
}

The position value can be:

1. “front” – delete the specified number of columns starting from the front.
2. “back” – delete the specified number of columns from the end.
3. index – delete the specified number of columns starting at the index.

Set columns width

Description:
Adjusts the width of a column at a specific position in the grid of the designated element.

{
    "type": "css-grid",
    "action": "set_column_width",
    "args": {
        "element": "#my-grid",
        "position": 1,
        "width": "1fr"
     }
 }

Add rows

Description:
The function inserts a new row into the grid of the specified element at the designated position.

{
    "type": "css-grid",
    "action": "add_row",
    "args": {
        "element": "#my-grid",
        "position": "front",
        "height": "1fr"
    }
}

The position value can be:

1. “front” – add a the front
2. “end” – add it at the end
3. index value – insert it at the index

Remove rows

Description:
The function deletes rows from the grid of the indicated element at the specified position.

{
    "type": "css-grid",
    "action": "remove_row",
    "args": {
        "element": "#my-grid",
        "position": "front",
        "count": 1
    }
}

The position value can be:

1. “front” – remove the specified quantity from the front.
2. “end” – remove the specified quantity from the end.
3. index value – remove the specified quantity starting at the index value.

Set row heights

Description:
Adjust the height of a row in the grid of the specified element at the designated position.

{
    "type": "css-grid",
    "action": "set_row_height",
    "args": {
        "element": "#my-grid",
        "position": 1,
        "height": "1fr"
    }
}

Set regions for the grid

Description:
This processes a list of areas and configures the grid template areas of the element to match these specified areas.

{
    "type": "css-grid",
    "action": "set_regions",
    "args": {
        "element": "#my-grid",
        "areas": [
            { "start": {"col":0,"row":0}, "end": {"col":1,"row":1}, "name": "area1" },
            { "start": {"col":2,"row":0}, "end": {"col":2,"row":1}, "name": "area2" },
            { "start": {"col":0,"row":2}, "end": {"col":2,"row":2}, "name": "area3" }
        ]
    }
}

Clear region

Description:
The function eliminates every element that has a data-area attribute corresponding to the specified area argument.

{
    "type": "css-grid",
    "action": "clear_region",
    "args": {
        "element": "#my-grid",
        "area": "area1"
    }
}

Get column count

Description:
Retrieve the column count of a CSS grid element.

{
    "type": "css-grid",
    "action": "column_count",
    "args": {
        "element": "#my-grid",
        "result": "$data.columnCount"
    }
}

Get row count

Description:
Retrieve the row count of the CSS grid element.

{
    "type": "css-grid",
    "action": "row_count",
    "args": {
        "element": "#my-grid",
        "result": "$data.columnCount"
    }
}

Get column sizes

Description:
The function retrieves the sizes of the columns in a grid element.

{
    "type": "css-grid",
    "action": "get_column_sizes",
    "args": {
        "element": "#my-grid",
        "target": "$data.sizes"
    }
}