Tech Stack Grid (GridTechStack)

Live demo

At a glance

Component: GridTechStack
Category: Grids & Listings
Used as: Page block — “Grid: Tech Stack”
Options: 10 editable fields
Built with: PHP, Twig, SCSS
Platform: WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

One rounded panel split into cells by hairline dividers, each holding a numbered category and its tags — matching the original chrisalberto.site stack section.

Highlights

Any category can be made Full Width with a Badge (e.g. “2025”) — description on the left, tags on the right, accent gradient.
3 / 2 / 1 columns across desktop, tablet and phone.
Empty tags are skipped, so missing data never shows placeholder text.

Options

Editors add this as Grid: Tech Stack in a page's components. Every field it exposes:

Option	Field	Type	Details
Number	`num`	text	Default: 02
Heading	`heading`	text	Default: Tech Stack
Categories	`categories`	repeater	Repeatable list
↳ Number	`num`	text	Default: 00
↳ Title *	`title`	text	Default: Sample Category
↳ Description	`description`	textarea	Optional. Usually only used on a full-width row.
↳ Badge	`badge`	text	Optional pill next to the title, e.g. "2025".
↳ Full Width	`isWide`	true false	Default: off Spans the whole row, with the tags on the right.
↳ Items	`items`	repeater	Repeatable list
↳ Item *	`item`	text

Under the hood

Components/GridTechStack/

_style.scss Styles (SCSS) 154 lines
functions.php Fields & data (PHP) 123 lines
index.twig Markup (Twig) 36 lines

Share this component

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub