# attr-grid > simple, unobtrusive, attribute based grid Latest version **1.0.2** (published 2017-04-16) · MIT license · 0 weekly downloads ## Install ```sh npm install attr-grid pnpm add attr-grid yarn add attr-grid bun add attr-grid ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.2 | | Published | 2017-04-16 | | First published | 2017-04-15 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 0 | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Dacre Denny | | Maintainers | mooce | | Keywords | grid, css, attribute, layout | ## Links - npm: https://www.npmjs.com/package/attr-grid - Homepage: https://github.com/mooce/attr-grid - npm.io page: https://npm.io/package/attr-grid ## Alternatives - [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads - [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads - [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads - [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads - [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads ## Recent versions - 1.0.2 (latest) — 2017-04-16 - 1.0.1 — 2017-04-16 - 1.0.0 — 2017-04-15 ## README # attr-grid attr-grid is a super simple, unobtrusive, responsive grid. This is only a grid - no css resets, defaults, or extras. Hopefully this makes it easy to use (and easy to comprehend/modify for your projects). attr-grid uses attributes rather than the class based css rules that are normally used in other grid systems. [View Demo](https://rawgit.com/mooce/attr-grid/master/index.html) ## Why? A while back I was looking for a simple "grid-only" stylesheet for a couple of projects I was working on. I didn't need the extras that typically come with other grids. I just needed something simple, like this! I ended up building a simple grid and, after working with [Angular Material's grid system](https://material.angularjs.org/latest/layout/introduction), was inspired by the use of attributes to achieve responsive grid control to build attr-grid. So in short, attr-grid is an attribute based adaption of my original grid system. ## Grid system defaults 12 column grid system. Columns are spaced with a `10px` gutter. Breakpoints are: - sm: 600px - md: 960px - lg: 1280px ## Build Install npm dev dependencies. ``` npm install ``` Build the stylesheet. ``` npm run build ``` ## Installation #### Link stylesheet Add the following to your HTML's `` section: ```html ``` #### Viewport scales Add the following to your HTML's `` section: ```html ``` This meta tag ensures mobile and tablet resize page content to match the devices actual viewport width. ## Usage #### Fluid grid Use the `row` attribute on element to define a grid row. Add a `col` attribute to specify the column's width under that row: ```html

eight column

four column

twelve column

``` #### Fixed grid Use the `fixed` attribute on element wrapping the grid to achieve a center fixed grid: ```html

eight column

four column

six column

``` #### Nested grids Nested grids are supported: ```html

3 column in 6 column

6 column in 6 column

3 column in 6 column

3 column in 6 column/div>

3 column in 6 column

``` #### Grid utilities Maybe you need full width blocks, at certian breakpoints? No worries! Here's how: ```html

eight column, full width on md breakpoint

four column, full width on md breakpoint

six column, full width on sm breakpoint

``` --- _Source: https://npm.io/package/attr-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._