CSS Layout

CSS layout is the art of deciding how elements occupy space on a page. Three models cover most of what you'll build: block, flex, and grid. Each answers a different question about how siblings relate to one another.

Block Layout

In block layout, elements stack vertically. Each block-level element takes the full width of its container and pushes the next element below it. This is the default for div, p, section, and most structural HTML.

Flex Layout

Flexbox distributes space along a single axis. Use it when you want items in a row or column to share space, align, or wrap — navigation bars, toolbars, and card rows are classic flex cases.

Grid Layout

Grid defines a two-dimensional matrix. Rows and columns are explicit, making it ideal for page layouts, dashboards, and galleries where both axes matter.

Compare how the same three boxes behave under flex layout.

When to Use Which

Layout	Best for
Block	Document flow, stacked content
Flex	One-dimensional distribution and alignment
Grid	Two-dimensional layouts with explicit tracks

Most real pages combine all three: a grid for the page shell, flex for component internals, and block flow for prose content inside.

About

Dev is a minimal mono developer blog focused on readable essays and interactive demos. It uses MDX for content, Shiki for syntax highlighting, and a tight typographic system inspired by classic engineer personal sites.

Navigate the live demo above to read sample posts and try the demos. Scaffold your own copy with the create command below, then swap in your name, social links, and writing.

Template source

Browse every file in templates/dev.

templates/dev

README.md

# Dev Blog

A minimal mono developer blog template — MDX essays, projects, and interactive demos.

Design by [Hugo Lin](https://1chooo.com).

## Quick start

### Option A — create-next-app (recommended)

```bash
npx create-next-app@latest my-blog \
  --example "https://github.com/1chooo/tawny" \
  --example-path "templates/dev"
```

### Option B — create-tawny CLI (interactive prompts)

```bash
npx create-tawny@latest dev my-blog
```

Then:

```bash
cd my-blog
pnpm install   # or npm / yarn / bun
pnpm dev
```

Open [http://localhost:3000](http://localhost:3000).

## Customize these files

| File | What to change |
|------|----------------|
| `app/layout.tsx` | Site title and metadata |
| `app/page.tsx` | About / home copy |
| `components/site-header.tsx` | Brand name in the header |
| `components/site-footer.tsx` | Social links and location |
| `app/blog/_articles/` | Your essays (`.mdx` files) |
| `app/projects/page.mdx` | Projects page |

### Placeholders

Search for `{{AUTHOR_NAME}}`, `{{AUTHOR_EMAIL}}`, `{{GITHUB_USERNAME}}`, and `{{CITY_NAME}}` across the project and replace them.

## Stack

- Next.js 16 App Router & React Server Components
- MDX & Shiki for content
- Tailwind CSS v4
- Minimal mono typography

## License

MIT

Dev