{"id":13548101,"url":"https://github.com/nggepe/simple_grid","last_synced_at":"2025-10-31T22:30:20.415Z","repository":{"id":53491052,"uuid":"346537160","full_name":"nggepe/simple_grid","owner":"nggepe","description":"Inspired by bootstrap , This is dynamic grid layout that you can use Like a bootstrap grid, and the size is following material UI break points. But, don't to worry you can customize your break point like here. This package purely using mediaquery, don't worry about the render.","archived":false,"fork":false,"pushed_at":"2024-12-30T01:04:19.000Z","size":4206,"stargazers_count":16,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T09:36:49.955Z","etag":null,"topics":["bootstrap-grid","dart","flutter","flutter-grid","grid","mediaquery"],"latest_commit_sha":null,"homepage":"","language":"C++","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/nggepe.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2021-03-11T01:03:17.000Z","updated_at":"2024-12-29T23:14:32.000Z","dependencies_parsed_at":"2024-01-16T18:08:04.089Z","dependency_job_id":"2c453dcd-92f0-43b0-beb7-f97b5af78c49","html_url":"https://github.com/nggepe/simple_grid","commit_stats":{"total_commits":76,"total_committers":1,"mean_commits":76.0,"dds":0.0,"last_synced_commit":"1d4be6c0779f9ae58fe7efe28167ea3b9582833a"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nggepe%2Fsimple_grid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nggepe%2Fsimple_grid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nggepe%2Fsimple_grid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nggepe%2Fsimple_grid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nggepe","download_url":"https://codeload.github.com/nggepe/simple_grid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238829552,"owners_count":19537720,"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":["bootstrap-grid","dart","flutter","flutter-grid","grid","mediaquery"],"created_at":"2024-08-01T12:01:05.698Z","updated_at":"2025-10-31T22:30:20.264Z","avatar_url":"https://github.com/nggepe.png","language":"C++","funding_links":[],"categories":["C++"],"sub_categories":[],"readme":"Indonesian documentation is \u003ca href=\"https://gepcode.com/post/dokumentasi-simple-grid\" target=\"_blank\"\u003ehere\u003c/a\u003e\n\n# Introduction\n\n[![pub package](https://img.shields.io/pub/v/simple_grid.svg)](https://pub.dev/packages/simple_grid)\n[![build](https://github.com/nggepe/simple_grid/actions/workflows/dart.yml/badge.svg)](https://github.com/nggepe/simple_grid/actions/workflows/dart.yml)\n\n**Inspired by bootstrap** ,\nThis is dynamic grid layout that you can use Like a bootstrap grid, but the size following \u003ca href=\"https://material-ui.com/customization/breakpoints/\"\u003ematerial UI\u003c/a\u003e break points. You can also customize your break point like \u003ca href=\"#customize-break-point\"\u003ehere\u003c/a\u003e.\nThis package purely using mediaquery, don't worry about the render.\n\n#### Simple Demo\n\ncode example \u003ca href=\"#example\"\u003ehere\u003c/a\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/nggepe/simple_grid/master/doc/demo-grid.gif\" width=\"100%\"/\u003e\n\n#### Order Demo\n\ncode example \u003ca href=\"#order-example\"\u003ehere\u003c/a\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/nggepe/simple_grid/master/doc/order-example.gif\" width=\"100%\"/\u003e\n\n#### Grid Explanation\n\nBootstrap, material-ui or another web-grid always use 12 size. Here is the image example:\n\u003cimg src=\"https://raw.githubusercontent.com/nggepe/simple_grid/master/doc/grid-example.png\" style=\"max-width: 400px;\" /\u003e\n\n## Classes\n\nThere are 4 classes that you have to now, these are:\n\n1. \u003ccode\u003eSpGrid\u003c/code\u003e is the container of grid, \u003ca href=\"https://github.com/nggepe/simple_grid/blob/master/doc/SpGrid/README.md\"\u003emore information here\u003c/a\u003e\n2. \u003ccode\u003eSpGridItem\u003c/code\u003e is the children of \u003ccode\u003eSpGrid\u003c/code\u003e, \u003ca href=\"https://github.com/nggepe/simple_grid/blob/master/doc/SpGridItem/README.md\"\u003emore information here\u003c/a\u003e\n3. \u003ccode\u003eSpGridSize\u003c/code\u003e is the class that you can declare the maximum of the **screen** size, \u003ca href=\"https://github.com/nggepe/simple_grid/blob/master/doc/SpGridSize/README.md\"\u003emore information here\u003c/a\u003e\n4. \u003ccode\u003eSpOrder\u003c/code\u003e, this class is a sort class. when you use 1 of it's value, the value will create an ordering when the screen on the value condition. \u003ca href=\"https://github.com/nggepe/simple_grid/blob/master/doc/SpOrder/README.md\"\u003emore information here\u003c/a\u003e\n\n## Example\n\n```dart\nSpGrid(width: MediaQuery.of(context).size.width, children: [\n  SpGridItem(\n    xs: 12,\n    sm: 6,\n    md: 4,\n    lg: 3,\n    child: Container(\n      color: Colors.blue,\n      height: 200,\n    ),\n  ),\n  SpGridItem(\n    xs: 12,\n    sm: 6,\n    md: 4,\n    lg: 3,\n    child: Container(\n      color: Colors.green,\n      height: 200,\n    ),\n  ),\n  SpGridItem(\n    xs: 12,\n    sm: 6,\n    md: 4,\n    lg: 3,\n    child: Container(\n      color: Colors.yellow,\n      height: 200,\n    ),\n  ),\n  SpGridItem(\n    xs: 12,\n    sm: 6,\n    md: 4,\n    lg: 3,\n    child: Container(\n      color: Colors.purple,\n      height: 200,\n    ),\n  ),\n]);\n```\n\n## Order Example\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:simple_grid/simple_grid.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return MaterialApp(\n      title: 'Simple_grid',\n      theme: ThemeData(\n        brightness: Brightness.dark,\n      ),\n      home: MyHomePage(),\n    );\n  }\n}\n\nclass MyHomePage extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text(\"SIMPLE GRID EXAMPLE\"),\n      ),\n      body: SpGrid(\n        width: MediaQuery.of(context).size.width,\n        spacing: 10,\n        runSpacing: 10,\n        children: [\n          SpGridItem(\n            xs: 12,\n            md: 6,\n            order: SpOrder(sm: 1, xs: 1),\n            child: Container(\n              height: 200,\n              child: Column(\n                mainAxisAlignment: MainAxisAlignment.center,\n                children: [\n                  Text(\n                    \"Hello!\",\n                    style: TextStyle(fontSize: 40),\n                    textAlign: TextAlign.center,\n                  ),\n                  SizedBox(\n                    height: 10,\n                  ),\n                  Text(\n                    \"I'm John Doe and I Love Programming\",\n                    style: TextStyle(fontSize: 25),\n                    textAlign: TextAlign.center,\n                  ),\n                ],\n              ),\n            ),\n          ),\n          SpGridItem(\n            xs: 12,\n            md: 6,\n            order: SpOrder(sm: 0, xs: 0),\n            child: Container(\n              height: 200,\n              decoration: BoxDecoration(\n                  image: DecorationImage(\n                      image: NetworkImage(\n                          \"https://raw.githubusercontent.com/nggepe/simple_grid/master/doc/john.png\"))),\n            ),\n          ),\n        ],\n      ),\n    );\n  }\n}\n```\n\n# Customize Break Point\n\n\u003cdiv id=\"#sp-break-point\"\u003e\u003c/div\u003e\n\n```dart\nSpGrid(\n  width: MediaQuery.of(context).size.width,\n  gridSize: SpGridSize(xs: 0, sm: 500, md: 768, lg: 980, xl: 1200),\n  children:[],\n)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnggepe%2Fsimple_grid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnggepe%2Fsimple_grid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnggepe%2Fsimple_grid/lists"}