{"id":23773958,"url":"https://github.com/caitken-com/css-grid","last_synced_at":"2026-04-03T20:30:22.278Z","repository":{"id":243977919,"uuid":"813929996","full_name":"caitken-com/css-grid","owner":"caitken-com","description":"A lightweight layout library for building great responsive mobile first UIs that work everywhere. Open Source, built with CSS Grid and Flexbox.","archived":false,"fork":false,"pushed_at":"2024-08-07T07:15:15.000Z","size":70,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-01T05:47:15.377Z","etag":null,"topics":["css-grid","css-grid-layout","css-grid-system"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caitken-com.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-12T02:42:11.000Z","updated_at":"2024-08-12T06:15:52.000Z","dependencies_parsed_at":"2024-08-10T06:46:52.611Z","dependency_job_id":null,"html_url":"https://github.com/caitken-com/css-grid","commit_stats":null,"previous_names":["caitken-com/css-grid"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caitken-com%2Fcss-grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caitken-com%2Fcss-grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caitken-com%2Fcss-grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caitken-com%2Fcss-grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caitken-com","download_url":"https://codeload.github.com/caitken-com/css-grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239964497,"owners_count":19725950,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css-grid","css-grid-layout","css-grid-system"],"created_at":"2025-01-01T05:47:18.556Z","updated_at":"2026-04-03T20:30:22.166Z","avatar_url":"https://github.com/caitken-com.png","language":"CSS","readme":"# CSS Grid\nA lightweight layout library for building great responsive mobile first layouts that work everywhere. Open source, built with CSS Grid and Flexbox.\n\n## Useage\n\n```html\n\u003clink href=\"https://cdn.statically.io/gh/caitken-com/css-grid/main/grid.css\" rel=\"stylesheet\" /\u003e\n```\n\n## Layout\n\nThis library leverages custom html data attributes to help namespace the layout based CSS. The grid can be 12 columns and/or rows.\n\n### Layout: Implicit Columns\n\nImplicit uniform columns can define their values at the parent grid element using `grid-cols-X`. There is no need for wrapper elements around each row, see example below.\n\n```html\n\u003cdiv data-layout=\"grid-cols-2\"\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n  \u003cdiv\u003e2\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Explicit Columns\n\nColumns that are not uniform can define their column span value directly on the column element using `cols-X`. Multiple rows are achieved with filling columns according to the 12 column layout.\n\n```html\n\u003cdiv data-layout=\"grid-cols\"\u003e\n  \u003cdiv data-layout=\"cols-1\"\u003e1\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-11\"\u003e11\u003c/div\u003e\n\n  \u003cdiv data-layout=\"cols-2\"\u003e2\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-10\"\u003e10\u003c/div\u003e\n\n  \u003cdiv data-layout=\"cols-3\"\u003e3\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-9\"\u003e9\u003c/div\u003e\n\n  \u003cdiv data-layout=\"cols-4\"\u003e4\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-8\"\u003e8\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Implicit rows\n\nImplicit uniform rows can define their values at the parent grid element using `grid-rows-X`\n\n```html\n\u003cdiv data-layout=\"grid-rows-3\" style=\"height: 350px;\"\u003e\n  \u003cdiv\u003e3\u003c/div\u003e\n  \u003cdiv\u003e3\u003c/div\u003e\n  \u003cdiv\u003e3\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Explicit rows\n\nRows that are not uniform can define their row span value directly on the element using `rows-X`\n\n```html\n\u003cdiv data-layout=\"grid-rows\" style=\"height: 350px;\"\u003e\n  \u003cdiv data-layout=\"rows-1\"\u003e1\u003c/div\u003e\n  \u003cdiv data-layout=\"rows-4\"\u003e4\u003c/div\u003e\n  \u003cdiv data-layout=\"rows-7\"\u003e7\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Responsive breakpoints\n\nBreakpoints attributes can be stacked.\n\n| Attribute | Screen size | Device | Behavior |\n| --- | --- | --- | --- |\n| `cols-1` to `cols-12`\u003cbr\u003e`rows-1` to `rows-12` | Extra small or any | Phones | Always column width.\u003cbr\u003eAlways row height. |\n| `cols-1-sm` to `cols-12-sm`\u003cbr\u003e`rows-1-sm` to `rows-12-sm` | Small devices (480px) | Phones / Tablets | 100% width to start, column width at breakpoint.\u003cbr\u003e100% height to start, row height at breakpoint. |\n| `cols-1-md` to `cols-12-md`\u003cbr\u003e`rows-1-md` to `rows-12-md` | Medium devices (720px) | Tablets / Laptops | 100% width to start, column width at breakpoint.\u003cbr\u003e100% height to start, row height at breakpoint. |\n| `cols-1-lg` to `cols-12-lg`\u003cbr\u003e`rows-1-lg` to `rows-12-lg` | Large devices (960px) | Tablets / Laptops | 100% width to start, column width at breakpoint.\u003cbr\u003e100% height to start, row height at breakpoint. |\n| `cols-1-xl` to `cols-12-xl`\u003cbr\u003e`rows-1-xl` to `rows-12-xl` | Extra large devices (1440px) | Hi-res Laptop / Desktop | 100% width to start, column width at breakpoint.\u003cbr\u003e100% height to start, row height at breakpoint. |\n\n### Implicit example\n\n```html\n\u003cdiv data-layout=\"grid-cols-2-md grid-cols-6-lg\"\u003e\n  \u003cdiv\u003e2-md 6-lg\u003c/div\u003e\n  \u003cdiv\u003e2-md 6-lg\u003c/div\u003e\n  \u003cdiv\u003e2-md 6-lg\u003c/div\u003e\n  \u003cdiv\u003e2-md 6-lg\u003c/div\u003e\n  \u003cdiv\u003e2-md 6-lg\u003c/div\u003e\n  \u003cdiv\u003e2-md 6-lg\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Explicit example\n\n```html\n\u003cdiv data-layout=\"grid-cols\"\u003e\n  \u003cdiv data-layout=\"cols-3-md cols-6-lg\"\u003e3-md 6-lg\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-3-md cols-6-lg\"\u003e3-md 6-lg\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-3-md cols-4-lg\"\u003e3-md 4-lg\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-3-md cols-8-lg\"\u003e3-md 8-lg\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Aligning grid elements\n\n- `cols-top`, `cols-top-sm`, `cols-top-md`, `cols-top-lg`, `cols-top-xl`\n- `cols-middle`, `cols-middle-sm`, `cols-middle-md`, `cols-middle-lg`, `cols-middle-xl`\n- `cols-bottom`, `cols-bottom-sm`, `cols-bottom-md`, `cols-bottom-lg`, `cols-bottom-xl`\n\n### Auto matching heights\n\nGrid columns automatically match column heights.\n\n```html\n\u003cdiv data-layout=\"grid-cols-4\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eIpsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Vertically top align columns\n\n```html\n\u003cdiv data-layout=\"grid-cols-4 cols-top\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eIpsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n\n### Vertically center columns\n\n```html\n\u003cdiv data-layout=\"grid-cols-4 cols-middle\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eIpsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Vertically bottom align columns\n\n```html\n\u003cdiv data-layout=\"grid-cols-4 cols-bottom\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eIpsum dolor amet alcatra landjaeger. Ipsum dolor amet alcatra landjaeger.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Gap spacing\n\nWith special modifiers you can remove gap (gutter) in grid layouts.\n\n- `gap-none`, `gap-none-sm`, `gap-none-md`, `gap-none-lg`, `gap-none-xl`\n- `gap-cols-none`, `gap-cols-none-sm`, `gap-cols-none-md`, `gap-cols-none-lg`, `gap-cols-none-xl`\n- `gap-rows-none`, `gap-rows-none-sm`, `gap-rows-none-md`, `gap-rows-none-lg`, `gap-rows-none-xl`\n\n```html\n\u003cdiv data-layout=\"grid-cols-3 gap-none\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eD\u003c/div\u003e\n  \u003cdiv\u003eE\u003c/div\u003e\n  \u003cdiv\u003eF\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv data-layout=\"grid-cols-3 gap-cols-none\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eD\u003c/div\u003e\n  \u003cdiv\u003eE\u003c/div\u003e\n  \u003cdiv\u003eF\u003c/div\u003e\n\u003c/div\u003e\n\n\u003cdiv data-layout=\"grid-cols-3 gap-rows-none\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eD\u003c/div\u003e\n  \u003cdiv\u003eE\u003c/div\u003e\n  \u003cdiv\u003eF\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Offset grid elements\n\nOffset utilities allows a column to be offset on a given row.\n\n- `cols-offset-X`, `cols-offset-X-sm`, `cols-offset-X-lg`, `cols-offset-X-xl`\n- `rows-offset-X`, `rows-offset-X-sm`, `rows-offset-X-lg`, `rows-offset-X-xl`\n\n```html\n\u003cdiv data-layout=\"grid-cols\"\u003e\n  \u003cdiv data-layout=\"cols-4\"\u003ecols-4\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-4 cols-offset-9\"\u003ecols-4 cols-offset-9\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-3-md cols-offset-4-md\"\u003ecols-3-md cols-offset-4-md\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-3-md cols-offset-10-md\"\u003ecols-3-md cols-offset-10-md\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-6-md cols-offset-4-md\"\u003ecols-6-md cols-offset-4-md\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Nesting grid elements\n\nGrids can be nested within other grids to create more complex layouts.\n\n```html\n\u003cdiv data-layout=\"grid-cols-2-lg\"\u003e\n  \u003cdiv\u003e\n    \u003cp\u003e2-lg\u003c/p\u003e\n    \u003cdiv data-layout=\"grid-cols-6\"\u003e\n      \u003cdiv\u003e6\u003c/div\u003e\n      \u003cdiv\u003e6\u003c/div\u003e\n      \u003cdiv\u003e6\u003c/div\u003e\n      \u003cdiv\u003e6\u003c/div\u003e\n      \u003cdiv\u003e6\u003c/div\u003e\n      \u003cdiv\u003e6\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003e\n    \u003cp\u003e2-lg\u003c/p\u003e\n    \u003cdiv data-layout=\"grid-cols-2-sm grid-cols-4-md\"\u003e\n      \u003cdiv\u003e2-sm 4-md\u003c/div\u003e\n      \u003cdiv\u003e2-sm 4-md\u003c/div\u003e\n      \u003cdiv\u003e2-sm 4-md\u003c/div\u003e\n      \u003cdiv\u003e2-sm 4-md\u003c/div\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Ordering grid elements\n\nFlexbox allows us to reorder columns regardless of the HTML order.\n\n- `first`, `first-sm`, `first-md`, `first-lg`, `first-xl`\n- `last`, `last-sm`, `last-md`, `last-lg`, `last-xl`\n\n### First\n\n```html\n\u003cdiv data-layout=\"grid-cols-4\"\u003e\n  \u003cdiv\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eD\u003c/div\u003e\n  \u003cdiv data-layout=\"first\"\u003eD\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Last\n\n```html\n\u003cdiv data-layout=\"grid-cols-4\"\u003e\n  \u003cdiv data-layout=\"last\"\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv\u003eD\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Responsive example\n\n```html\n\u003cdiv data-layout=\"grid-cols-4\"\u003e\n  \u003cdiv data-layout=\"last-md\"\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n  \u003cdiv\u003eC\u003c/div\u003e\n  \u003cdiv data-layout=\"first-md\"\u003eD\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Centered grid elements\n\nYou can use the `cols-offset-X` utilities to center elements.\n\n```html\n\u003cdiv data-layout=\"grid-cols-4\"\u003e\n  \u003cdiv data-layout=\"cols-offset-2\"\u003eA\u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Vertical and horizontal column centering\n\nUsing a combination of `cols-middle` and `cols-offset-X` we can create centered containers.\n\n```html\n\u003cdiv data-layout=\"grid-cols cols-middle\" style=\"height: 350px;\"\u003e\n  \u003cdiv data-layout=\"cols-4 cols-offset-5\"\u003eIpsum dolor amet alcatra landjaeger.\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Flex, Fit \u0026 Fill\n\nThe `flex`, `fill` and `fit` attributes can be used to align variable size elements. Example use the `flex` attribute to set all immediate children to flex items. Once set use `fit` to adjust element to fit only to its content size and use `fill` to fill in all available space.\n\n- `flex`\n- `fit`, `fit-sm`, `fit-md`, `fit-lg`, `fit-xl`\n- `fill`, `fill-sm`, `fill-md`, `fill-lg`, `fill-xl`\n\n```html\n\u003cdiv data-layout=\"flex\"\u003e\n  \u003cdiv data-layout=\"fit\"\u003e\n    \u003cdiv\u003e\u0026lt;\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv data-layout=\"fill\"\u003e\n    \u003cdiv\u003eIpsum dolor amet alcatra\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv data-layout=\"fit\"\u003e\n    \u003cdiv\u003e\u0026gt;\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Visibility utilities\n\nMultiple helper attributes to show and hide content to the corresponding grid breakpoints.\n\n- `show`, `show-sm`, `show-md`, `show-lg`, `show-xl`\n- `hide`, `hide-sm`, `hide-md`, `hide-lg`, `hide-xl`\n\n```html\n\u003cdiv data-layout=\"grid-cols-2\"\u003e\n  \u003cdiv data-layout=\"hide show-md\"\u003e\n    A \u003cspan data-layout=\"hide show-lg\"\u003eworks on inline elements\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003eB\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Text alignment\n\n- `text-left`, `text-left-sm`, `text-left-md`, `text-left-md`, `text-left-lg`\n- `text-right`, `text-right-sm`, `text-right-md`, `text-right-md`, `text-right-lg`\n- `text-center`, `text-center-sm`, `text-center-md`, `text-center-md`, `text-center-lg`\n\n```html\n\u003cdiv data-layout=\"grid-cols\"\u003e\n  \u003cdiv data-layout=\"cols-6 text-left\"\u003etext-left\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-6 text-right\"\u003etext-right\u003c/div\u003e\n  \u003cdiv data-layout=\"cols-12 text-center\"\u003etext-center\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Float utilities\n\nThe float utils make it easy to float a item left, right, or center (margin auto). The `clear-fix` is a common clear fix utility to force content to clear a block element that is floated. Without a clearfix a single floated item will cause content immediately after it to potentially wrap content which may or may not be desired. Read more about [clear fix here](https://css-tricks.com/snippets/css/clear-fix).\n\n- `clear-fix`, `clear-fix-sm`, `clear-fix-md`, `clear-fix-lg`, `clear-fix-xl`\n- `float-left`, `float-left-sm`, `float-left-md`, `float-left-lg`, `float-left-xl`\n- `float-center`, `float-center-sm`, `float-center-md`, `float-center-lg`, `float-center-xl`\n- `float-right`, `float-right-sm`, `float-right-md`, `float-right-lg`, `float-right-xl`\n\n```html\n\u003cdiv data-layout=\"clear-fix\"\u003e\n\t\u003cdiv data-layout=\"float-center\"\u003eA\u003c/div\u003e\n\t\u003cdiv data-layout=\"float-left float-right-md\"\u003eB\u003c/div\u003e\n\t\u003cdiv data-layout=\"float-right float-left-md\"\u003eC\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Container\n\nBasic `container` attribute to set max width and centered page level content. The container defaults to a maximum width of 1000px.\n\n```html\n\u003cdiv data-layout=\"container\"\u003e\n  \u003cdiv\u003eIpsum dolor amet\u003c/div\u003e\n\u003c/div\u003e\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaitken-com%2Fcss-grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaitken-com%2Fcss-grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaitken-com%2Fcss-grid/lists"}