Aisol Compare Grid

Aisol Compare Grid is a plan comparison table: plans across the top, features down the side, a check, a dash or a value in every cell.

Click a plan header and its whole column is tinted, so a visitor can follow one plan down the table. On a phone the table keeps the feature names plus the picked plan, and chips above switch plans, so nothing scrolls sideways.

Each row takes its values as one line such as yes | 5 | no, and group rows label sections like Team or Support. It is the free sibling of Aisol Plan Diff, which adds pricing cards, yearly billing and a differences-only fold.

- A real HTML table with a caption, column headers and row headers, so screen readers move cell by cell and read Included or Not included for each mark.

- Picking a plan only changes a data attribute: no measuring, no animation frames, nothing runs while idle.

- The narrow layout is a container query, so it follows the width of the section, not the window.

What you control

• Plans (up to 5): name, price text, note, button text and link

• Rows (up to 40): feature name, values split by |, group label on or off

• Table: starting plan, stripes, caption and screen reader words for check and dash, plan switcher label

• Look: background, table, text, muted, lines, accent, text on accent, picked column tint; max width, radius, padding; font and text size

Limits: values are typed per row, not pulled from a CMS collection; up to 5 plans and 40 rows; the price is plain text, with no monthly and yearly switch (that is in Aisol Plan Diff).