{"id":13397759,"url":"https://github.com/aekaplan/grid","last_synced_at":"2026-02-22T01:04:06.095Z","repository":{"id":14014470,"uuid":"16716107","full_name":"aekaplan/grid","owner":"aekaplan","description":"A simple guide to responsive design.","archived":false,"fork":false,"pushed_at":"2021-05-31T04:53:13.000Z","size":350,"stargazers_count":1271,"open_issues_count":3,"forks_count":157,"subscribers_count":77,"default_branch":"master","last_synced_at":"2026-01-23T16:45:29.025Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"adamkaplan.me/grid","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aekaplan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-02-11T02:00:06.000Z","updated_at":"2025-12-26T09:10:32.000Z","dependencies_parsed_at":"2022-08-24T13:37:54.862Z","dependency_job_id":null,"html_url":"https://github.com/aekaplan/grid","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/aekaplan/grid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aekaplan%2Fgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aekaplan%2Fgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aekaplan%2Fgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aekaplan%2Fgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aekaplan","download_url":"https://codeload.github.com/aekaplan/grid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aekaplan%2Fgrid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29701949,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T23:35:04.139Z","status":"ssl_error","status_checked_at":"2026-02-21T23:35:03.832Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-07-30T18:01:43.398Z","updated_at":"2026-02-22T01:04:06.067Z","avatar_url":"https://github.com/aekaplan.png","language":"HTML","readme":"Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/blog/grid-retrospective).\n\n\n## Grid\n\nA simple guide to responsive design.\u003cbr\u003e\nwww.adamkaplan.me/grid\n\n#### Why bother with responsive?\nWe want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.\n\n#### A Fragmented World\nAs of 2013, there are thousands of different devices and screen sizes that browse the internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to design.\n\n#### Mobile First\nThe term “mobile first” gets thrown around a lot lately. What it really means is to start with mobile styles and layer on styles optimized for larger screens only as needed. In other words, your mobile styles become the default and you no longer have to override them later. It’s much simpler!\n\n\u003e By assuming a flexible but simple layout by default, you can better guard against browsers—with viewports wide and small—that aren’t quite capable of the full responsive layout. So when we’re talking about layout, “mobile first” really means “progressive enhancement.” —Ethan Marcotte\n\n## Min-width Media Queries\nIntroduce layout-specific rules only when you need them. Use `min-width` to layer complexity on your layout as the viewport widens. It’s easier to have all the media queries nearby, rather than at the end of the stylesheet or in a separate document.\n\n```css\n/* Small screens (default) */\nhtml { font-size: 100%; }\n\n/* Medium screens (640px) */\n@media (min-width: 40rem) {\n  html { font-size: 112%; }\n}\n\n/* Large screens (1024px) */\n@media (min-width: 64rem) {\n  html { font-size: 120%; }\n}\n```\n\n## Steps\n\n#### 1. Not All Browsers are Created Equal\nBrowsers will render your CSS differently. To avoid this, it’s a good idea to use a modern alternative to a reset like [Normalize.css](http://necolas.github.io/normalize.css/), which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"/css/normalize.css\"\u003e\n\u003clink rel=\"stylesheet\" href=\"/css/grid.css\"\u003e\n```\n\n#### 2. Add the Viewport Meta Tag\nPlace in the `\u003chead\u003e` of your HTML. This enables use of media queries for cross-device layouts.\n```html\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n```\n\n#### 3. Use box-sizing: border-box\nPlace at the top of your CSS file. The `*` will target all elements on the page.\n```css\n*, *:before, *:after {\n  -moz-box-sizing: border-box;\n  -webkit-box-sizing: border-box;\n  box-sizing: border-box;\n}\n```\n\n#### 4. Create a Container\nA container holds all elements and controls the page's maximum width. Using a container will make designing for responsive easier!\n```css\n.container {\n  margin: 0 auto;\n  max-width: 48rem;\n  width: 90%;\n}\n```\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003c!-- Your Content --\u003e\n\u003c/div\u003e\n```\n\n#### 5. Create a Column\nWith mobile first, columns are `block` level (takes up the full width available) by default. No additional styles needed!\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003c!-- Your Content --\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### 6. Create Column Sizes\nOn larger screens, columns gain `float: left` in order to stack content horizontally. Columns now use padding for gutters, so you no longer need to worry about removing margins.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n@media (min-width: 40rem) {\n  .column {\n    float: left;\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n\n  .column.full { width: 100%; }\n  .column.two-thirds { width: 66.7%; }\n  .column.half { width: 50%; }\n  .column.third { width: 33.3%; }\n  .column.fourth { width: 25%; }\n  .column.flow-opposite { float: right; }\n}\n```\n\n#### 7. Create Rows\nColumns are wrapped in rows to prevent other elements from stacking next to them, otherwise know as clearing issues. Rows are cleared using the popular `clearfix`, which was created by [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/).\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row clearfix\"\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"row clearfix\"\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n.clearfix:before,\n.clearfix:after {\n  content: \" \";\n  display: table;\n}\n\n.clearfix:after {\n  clear: both;\n}\n\n.clearfix {\n  *zoom: 1;\n}\n```\n\n#### Flow Opposite\nAdd the class `.flow-opposite` to columns where you want content to display first on mobile but appear on the right on larger screens.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row clearfix\"\u003e\n    \u003cdiv class=\"column half flow-opposite\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"column half\"\u003e\n      \u003c!-- Your Content --\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```css\n@media (min-width: 40rem) {\n  .column.flow-opposite { float: right; }\n}\n```\n\n#### Further Reading\n* [A Book Apart: Mobile First](http://www.abookapart.com/products/mobile-first)\n* [A Book Apart: Responsive Web Design](http://www.abookapart.com/products/responsive-web-design)\n* [Beginner’s Guide to Responsive Web Design](http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design)\n* [Box-sizing: Border-box FTW](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)\n* [Don't Forget the Viewport Meta Tag](http://dev.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972)\n* [The Many Faces of ‘Mobile First’](http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/)\n* [Understanding the Humble Clearfix](http://fuseinteractive.ca/blog/understanding-humble-clearfix)\n\n#### References\n* [Android Fragmentation Visualized](http://opensignal.com/reports/fragmentation-2013/)\n* [Animate.css](http://daneden.github.io/animate.css/)\n* [Box Model](http://developer.mozilla.org/en-US/docs/Web/CSS/box_model)\n* [Chrome Developer Tools](http://developers.google.com/chrome-developer-tools/)\n* [Code samples by GitHub Gist](https://gist.github.com/aekaplan)\n* [Internet Explorer Box Model](http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)\n* [Progressive Enhancement](http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/)\n\n## Translations\nTranslations are maintained by their creators and may not always be up to date with the original here. Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical.\n\n* [Chinese](http://geekplux.github.io/grid) - Translated by [GeekPlux](http://www.geekplux.com/)\n* [Japanese](http://maepon.github.io/grid/) - Translated by [Masayuki Maekawa](http://maepon.skpn.com/)\n* [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/)\n* [Türkçe](http://eminarslan.github.io/grid/) - Çeviren [eminarslan](http://eminarslan.com/)\n* [Ukrainian](http://ivaskevytch.github.io/grid/) - Translated by Ivaskevytch\n","funding_links":[],"categories":["HTML","7. 网格系统","书籍 / 阅读"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faekaplan%2Fgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faekaplan%2Fgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faekaplan%2Fgrid/lists"}