WinGrid

A CSS grid (or flex) container for arranging child elements. Grid default uses auto-fill with 240px minimum columns.

When to use

Use WinGrid to lay out cards, badges, or any collection of items in a responsive grid or flex row.

When not to use

Do not use WinGrid for single-column layouts. Use a plain <div> instead.

Installation

Install the package:

npm install win2k-ui

Then import the component:

import { WinGrid } from 'win2k-ui'

Make sure you have Tailwind CSS v4 set up, then add this to your root CSS file:

@import "tailwindcss";
@import "win2k-ui/styles.css";

No other dependencies required. The components ship with zero third-party UI dependencies — just Tailwind CSS 4 and React.

Preview

Interactive examples showing various states and configurations. Click “Show Code” to view the source for each variation.

Grid layout (3 items)

My Documents

Store your files and folders.

My Pictures

View and organize images.

My Music

Play and manage audio files.

Flex layout variant

Calculator

Notepad

Paint

WordPad

Props

All available props for the WinGrid component.

Prop	Type	Default	Description
`children`	`ReactNode`	`—`	Child elements.
`layout`	`'grid' \| 'flex'`	`'grid'`	Layout mode.
`className`	`string`	`''`	Additional CSS classes.

Usage

Example showing the component in a typical context:

import { WinGrid } from 'win2k-ui'
import { WinBox } from 'win2k-ui'

export function Example() {
  return (
    <WinGrid>
      <WinBox>Item 1</WinBox>
      <WinBox>Item 2</WinBox>
      <WinBox>Item 3</WinBox>
    </WinGrid>
  )
}