Content Grid

A CSS grid based layout using named lines, container queries and fluid typography that can be used to display articles, blog posts, etc. in a full width container. Behavior in non full width context is not guaranteed... yet.

Preview

Installation

npx shadcn@latest add https://chc-registry.vercel.app/r/content-grid.json

pnpm dlx shadcn@latest add https://chc-registry.vercel.app/r/content-grid.json

Add a classname utility function

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export const cn = (...inputs: ClassValue[]) => {
  return twMerge(clsx(inputs));
};

Copy and paste the following code into your project

Update the import paths to match your project setup

Usage

The Content Grid component is a wrapper that allows you to display content in a grid layout. It is designed to be used in a container with a full width, and will automatically adjust the grid layout based on the container width, e.g. using container queries.

Basic Usage

import { ContentGrid } from '@/components/ui/chc/content-grid';

<div className='@container max-h-[50vh] overflow-y-auto'>
  <ContentGrid>
    <h1>Content Grid</h1>
    <p>Content Grid is a component that displays content in a grid layout.</p>
  </ContentGrid>
</div>

Usage class

<div className='@container max-h-[50vh] overflow-y-auto'>
  <div className='content-grid'>
    <h1>Content Grid</h1>
    <p>Content Grid is a component that displays content in a grid layout.</p>
  </div>
</div>