awesome-repositories.com
Blog
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectAboutHow we rankPressMCP server
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
nathansmith avatar

nathansmith/960-Grid-System

0
View on GitHub↗
4,132 stars·509 forks·CSS·3 views960.gs↗

960 Grid System

This project is a fixed-width CSS layout framework designed to organize web content into a standardized grid of columns and gutters. It provides a set of CSS rules and dimensions that ensure consistent page alignment and spacing across a frontend design grid.

The system synchronizes visual design mockups with technical implementations using a 960 pixel width. It includes specialized style sheets that mirror grid alignment to support right-to-left language directions.

The framework covers grid management through column implementation and layout spacing control. It further provides design integration for mockup synchronization and element positioning tools that decouple visual placement from source order to support accessibility and search engine optimization.

Features

  • Fixed Grid Layouts - Provides a standardized 960-pixel fixed-width grid system for consistent web page alignment.
  • Fixed-Width Containers - Constrains the entire layout to a specific pixel width to ensure consistent alignment across browsers.
  • Layout Gap Management - Implements precise control over horizontal gutters and spacing between grid columns.
  • Grid Gutters - Implements horizontal gaps between columns using relative units to maintain proportional spacing.
  • CSS Grid Layout Design - Organizes content into standardized column layouts with consistent gutters and margins.
  • Pixel-Perfect Layout Systems - Syncs visual design mockups with technical web implementations using a standardized 960 pixel width.
  • Grid Class Mappings - Provides CSS class mappings to define specific grid column widths and offsets for rapid page assembly.
  • Grid Layout Systems - Implements a fixed-width grid system to maintain consistent alignment and spacing across a layout.
  • Fixed-Width Grid Frameworks - Provides a fixed-width CSS framework that organizes web content into a standardized grid of columns and gutters.
  • Grid Dimension Mapping - Synchronizes graphic design templates with CSS dimensions for pixel-perfect translation from mockups to browser.
  • Design-to-Code Workflows - Bridges the gap between graphic design mockups and technical grid implementations for layout consistency.
  • Legacy Float Layouts - Uses CSS float properties to position columns side by side within a shared horizontal container.
  • Right-To-Left Support - Provides specialized styling rules that mirror the layout and alignment for right-to-left languages.
  • RTL Layouts - Includes stylesheets that mirror grid alignment to support right-to-left language directions.
  • Rapid Web Prototyping - Accelerates web page development through standardized dimensions and pre-defined grid layouts.

Star history

Star history chart for nathansmith/960-grid-systemStar history chart for nathansmith/960-grid-system

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Open-source alternatives to 960 Grid System

Similar open-source projects, ranked by how many features they share with 960 Grid System.
  • metafizzy/packerymetafizzy avatar

    metafizzy/packery

    4,317View on GitHub↗

    Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of varying sizes into a gapless, compact grid by calculating and applying absolute coordinates to HTML elements to prevent overlapping. The library enables the creation of draggable grid interfaces, allowing users to rearrange elements via drag-and-drop while the system automatically reflows the remaining items. It maintains stable, responsive layouts across different screen dimensions by using a percentage-based positioning system and responding to window resize events. The tool

    JavaScript
    View on GitHub↗4,317
  • react-page/react-pagereact-page avatar

    react-page/react-page

    9,551View on GitHub↗

    react-page is a browser-based visual content editor and schema-driven page builder developed with React and TypeScript. It provides a framework for creating web pages through a what-you-see-is-what-you-get interface, utilizing a responsive twelve-column grid engine for arranging elements via drag-and-drop manipulation. The system features a plugin-based architecture that allows for the integration of custom components. These components are managed through a schema-driven system that automatically generates data entry forms based on predefined property definitions, separating the rendering vie

    TypeScripteditorreactsites
    View on GitHub↗9,551
  • peterramsing/lostpeterramsing avatar

    peterramsing/lost

    4,458View on GitHub↗

    Lost is a CSS grid system and PostCSS plugin designed to define column widths and positions using mathematical calculations for responsive screen designs. It functions as a build-time tool that processes custom grid rules into browser-compatible CSS layouts. The framework transforms non-standard layout declarations into native CSS Grid and Flexbox properties. It uses a PostCSS-based pipeline to calculate exact coordinates and column widths, ensuring that the resulting styles are compatible with standard web browsers. The project operates as a preprocessor-agnostic middleware layer, allowing

    JavaScriptcssgridjavascript
    View on GitHub↗4,458
  • picturepan2/spectrepicturepan2 avatar

    picturepan2/spectre

    11,317View on GitHub↗

    Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It functions as a CSS component library that provides pre-styled interface elements and helper classes to facilitate frontend UI development. The framework is distinguished by a pure-CSS component architecture that avoids dependence on external JavaScript runtimes. It utilizes a SASS-based build pipeline that supports class prefixing, stylesheet pruning, and a variable-based theme system for creating custom design systems. The project covers a wide range of layout and interface ca

    CSS
    View on GitHub↗11,317
See all 30 alternatives to 960 Grid System→

Frequently asked questions

What does nathansmith/960-grid-system do?

This project is a fixed-width CSS layout framework designed to organize web content into a standardized grid of columns and gutters. It provides a set of CSS rules and dimensions that ensure consistent page alignment and spacing across a frontend design grid.

What are the main features of nathansmith/960-grid-system?

The main features of nathansmith/960-grid-system are: Fixed Grid Layouts, Fixed-Width Containers, Layout Gap Management, Grid Gutters, CSS Grid Layout Design, Pixel-Perfect Layout Systems, Grid Class Mappings, Grid Layout Systems.

What are some open-source alternatives to nathansmith/960-grid-system?

Open-source alternatives to nathansmith/960-grid-system include: metafizzy/packery — Packery is a JavaScript bin-packing grid layout engine and DOM element positioning library. It arranges elements of… react-page/react-page — react-page is a browser-based visual content editor and schema-driven page builder developed with React and… peterramsing/lost — Lost is a CSS grid system and PostCSS plugin designed to define column widths and positions using mathematical… picturepan2/spectre — Spectre is a comprehensive CSS framework and UI utility toolkit designed for building responsive web interfaces. It… kettanaito/atomic-layout — Atomic Layout is a declarative framework for building responsive user interfaces in React. It functions as a layout… angular/flex-layout — This project is a responsive layout framework for Angular that provides a system of directives to create adaptive user…