Masonry Pills - Dynamic 2-Row Layout

A web application demonstrating two different approaches to distributing items across two horizontal rows:

• UI-driven: Uses actual pixel width measurements to balance items across rows
• BE-driven: Uses character count to balance items (simulating backend logic)

Features

• Live input editing with localStorage persistence
• Phone screen overlay showing mobile viewport
• Real-time width/character sum statistics
• Responsive pill-based layout

Deploy to GitHub Pages

Follow these steps to deploy this project to GitHub Pages:

1. Initialize Git Repository

Open your terminal, navigate to this directory, and run:

cd ~/masonry-pills
git init
git add .
git commit -m "Initial commit: Masonry pills layout"

2. Create GitHub Repository

1. Go to https://github.com/new
2. Repository name: masonry-pills (or your preferred name)
3. Leave it public
4. Do NOT initialize with README, .gitignore, or license
5. Click "Create repository"

3. Push to GitHub

Replace YOUR_USERNAME with your GitHub username:

git remote add origin https://github.com/YOUR_USERNAME/masonry-pills.git
git branch -M main
git push -u origin main

4. Enable GitHub Pages

1. Go to your repository on GitHub
2. Click "Settings" tab
3. Click "Pages" in the left sidebar
4. Under "Source", select "Deploy from a branch"
5. Under "Branch", select main and / (root)
6. Click "Save"

5. Access Your Site

After a few minutes, your site will be available at:

https://YOUR_USERNAME.github.io/masonry-pills/

Local Development

Simply open index.html in your browser:

open index.html

Files

• index.html - Main HTML structure
• styles.css - All styling including phone frame overlay
• script.js - JavaScript logic for both layout algorithms