{"id":19561728,"url":"https://github.com/preethi-dev/modern-layouts","last_synced_at":"2026-03-03T17:03:40.322Z","repository":{"id":202618255,"uuid":"707716806","full_name":"Preethi-Dev/modern-layouts","owner":"Preethi-Dev","description":"50 Extremely Modern Layouts Using CSS Grid✨","archived":false,"fork":false,"pushed_at":"2023-10-20T15:36:31.000Z","size":7,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-08T22:54:26.863Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":null,"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/Preethi-Dev.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,"governance":null}},"created_at":"2023-10-20T13:56:26.000Z","updated_at":"2024-06-30T14:32:16.000Z","dependencies_parsed_at":"2023-10-20T16:35:54.781Z","dependency_job_id":null,"html_url":"https://github.com/Preethi-Dev/modern-layouts","commit_stats":null,"previous_names":["preethi-dev/modern-layouts"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Preethi-Dev%2Fmodern-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Preethi-Dev%2Fmodern-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Preethi-Dev%2Fmodern-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Preethi-Dev%2Fmodern-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Preethi-Dev","download_url":"https://codeload.github.com/Preethi-Dev/modern-layouts/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240822608,"owners_count":19863302,"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":[],"created_at":"2024-11-11T05:12:25.184Z","updated_at":"2026-03-03T17:03:35.282Z","avatar_url":"https://github.com/Preethi-Dev.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modern Layouts\n\nModern layouts strengthen skills in thinking of complex grid layouts with a responsive nature. I used various native CSS Grid techniques. `The ASCII-Art Method` and `the Named grid line technique` tempted me to develop around **50 modern layouts**. In fact, I wrote a dedicated article for the [ASCII-Art Method](https://css-tricks.com/using-grid-named-areas-to-visualize-and-reference-your-layout/) at CSS-TRICKS (It received significant attention from fellow developers and was even featured as \"POPULAR OF THE MONTH).\n\n_50 days challenge on Modern Layouts using CSS Grid._\n\n## Modern Layouts - 01/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-01) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-01/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-01/main/assets/images/screenshot-layout-o1.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use a 12-column grid layout\n✅ Responsive to each breakpoint\n```\n\n\n\n## Modern Layouts - 02/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-02) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-02/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-02/master/assets/images/layout-02-screenshot.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use a 12-column grid layout\n✅ Responsive to each breakpoint\n✅ Placing items using Named Template Areas\n```\n\n## Modern Layouts - 03/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-03) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-03/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-03/master/assets/images/layout-03-screenshot.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n✅ Using the power of Grid Auto-Placement Rule\n```\n\n## Modern Layouts - 04/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-04) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-04/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-04/main/assets/images/layout-04-screenshot.png)\n\n```\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 05/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-05) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-05/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-05/main/assets/images/layout-05-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 06/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-06) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-06/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-06/master/assets/images/layout-06-screenshot.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid for desktop Breakpoint\n✅ Use an 8-column grid for Large Tablet and Laptop Breakpoint\n✅ Use a 4-column grid for Mobile Breakpoint\n```\n\n## Modern Layouts - 07/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-07) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-07/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-07/main/assets/images/screenshot/Layout-07-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 08/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-08) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-08/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-08/main/assets/images/Layout-08-screenshot.png)\n\n```\n✅ Use Named Template Area Placement\n✅ ASCII-ART method of grid layout\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 09/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-09) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-09/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-09/main/assets/images/Layout-09-screenshot.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 10/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-10) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-10/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-10/main/assets/images/Layout-10-screenshot.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 11/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-11) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-11/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-11/main/assets/images/Layout-11-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 12/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-12) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-12/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-12/main/assets/images/layout-12-screenshot.png)\n\n```\n✅ Use Named Template Area Placement\n✅ ASCII-ART method of grid layout\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 13/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-13) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-13/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-13/main/assets/images/layout-13-screenshot.png)\n\n```\n❌ No Absolute or Relative positioning\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 14/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-14) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-14/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-14/main/assets/images/Layout-14-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 15/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-15) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-15/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-15/main/assets/images/Layout-15-screenshot.png)\n\n```\n✅ Use Line Based Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 16/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-16) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-16/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-16/main/assets/images/Layout-16-screenshot.png)\n```\n❌ No Absolute or Relative positioning\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 17/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-17) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-17/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-17/main/assets/images/Layout-17-screenshot.png)\n\n```\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n✅ Use the power of Grid Auto Placement Rule\n```\n\n## Modern Layouts - 18/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-18) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-18/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-18/main/assets/images/Layout-18-screenshot.png)\n\n```\n✅ Use Line-based placement\n✅ Responsive to each breakpoint\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 19/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-19) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-19/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-19/main/assets/images/Layout-19-screenshot.png)\n\n```\n✅ Use Named Grid Lines placement\n✅ Responsive to each breakpoint\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 20/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-20) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-20/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-20/main/assets/images/Layout-20-screenshot.png)\n\n```\n✅ Use FlexBox\n✅ Responsive to each breakpoint\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 21/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-21) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-21/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-21/main/assets/screenshot/layout-21-screenshot.png)\n\n```\n✅ Use Line Based placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid layout\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 22/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-22) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-22/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-22/main/assets/screenshot/layout-22-screenshot.png)\n```\n✅ Use FlexBox\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 23/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-23) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-23/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-23/main/assets/screenshot/layout-23-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 24/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-24) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-24/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-24/main/assets/screenshot/layout-24-screenshot.png)\n\n```\n✅ Use Named Grid Template areas Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 25/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-25) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-25/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-25/main/assets/screenshot/layout-25-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use a 12-column grid\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 26/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-26) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-26/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-26/main/asstes/screenshot/layout-26-screenshot.png)\n\n```\n✅ Use ASCII ART METHOD of CSS Grid\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 27/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-27) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-27/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-27/main/assets/screenshot/layout-27-screenshot.png)\n\n```\n✅ Use Line Based Placement\n✅ Responsive to each breakpoint\n✅ Use Single Column grid\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 28/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-28) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-28/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-28/main/assets/screenshot/layout-28-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use a 12-column grid\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 29/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-29) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-29/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-29/main/assets/screenshot/layout-29-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 30/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-30) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-30/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-30/main/assets/screenshot/layout-30-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use the power of Grid's Auto Placement Algorithm.\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 31/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-31) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-31/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-31/main/asstes/screenshot/layout-31-screenshot.png)\n\n```\n✅ Use FlexBox\n✅ Responsive to each breakpoint\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 32/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-32) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-32/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-32/main/assets/screenshot/layout-32-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use 12-column grid\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 33/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-33) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-33/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-33/main/assets/screenshot/layout-33-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use 12-column grid\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 34/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-34) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-34/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-34/main/assets/screenshot/layout-34-screenshot.png)\n\n```\n✅ Use Single Column Grid\n✅ FlexBox Enriched Layout\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 35/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-35) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-35/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-35/main/asstes/screenshot/layout-35-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 36/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-36) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-36/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-36/main/assets/screenshot/layout-38-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 37/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-37) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-37/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-37/main/assets/screenshot/layout-37-screenshot.png)\n\n```\n✅ Use Line Based Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 38/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-38) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-38/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-38/main/assets/screenshot/layout-38-screenshot.png)\n\n```\n✅ Use Line Based Placement\n✅ Responsive to each breakpoint\n✅ Use 12-column grid\n```\n\n## Modern Layouts - 39/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-39) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-39/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-39/main/assets/screenshot/layout-39-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 40/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-40) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-40/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-40/main/assets/screenshot/layout-40-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 41/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-41) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-41/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-41/main/assets/screenshot/Layout-41-screenshot.png)\n\n```\n✅ Use FlexBox\n✅ Responsive to each breakpoint\n❌ No Absolute or Relative positioning\n```\n\n## Modern Layouts - 42/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-42) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-42/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-42/main/assets/screenshot/layout-42-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use the power of Grid's Auto Placement Algorithm.\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 43/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-43) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-43/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-43/main/assets/screenshot/layout-43-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 44/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-44) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-44/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-44/main/assets/screenshot/layout-44-screenshot.png)\n\n```\n✅ Use CSS Grid line-based placement\n✅ Use a 12-column Grid\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 45/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-45) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-45/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-45/main/assets/screenshot/layout-45-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 46/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-46) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-46/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-46/main/assets/screenshot/layout-46-screenshot.png)\n\n```\n✅ Use CSS Grid Line Based Placement\n✅ Use a 12-Column Grid.\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 47/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-47) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-47/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-47/main/assets/screenshot/layout-47-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 48/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-48) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-48/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-48/main/assets/screenshot/layout-48-screenshot.png)\n\n```\n✅ Use Named Grid Lines Placement\n✅ Responsive to each breakpoint\n✅ Use a 12-column grid\n```\n\n## Modern Layouts - 49/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-49) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-49/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-49/main/assets/screenshot/layout-49-screenshot.png)\n\n```\n✅ Use CSS Grid Line Based Placement\n✅ Use a 12-column grid.\n✅ Responsive to each breakpoint\n```\n\n## Modern Layouts - 50/50 (#Made-In-CSS-Grid)\n\n[Source Code](https://github.com/Preethi-Dev/Modern-Layout-50) - [Live Preview](https://preethi-dev.github.io/Modern-Layout-50/)\n\n![screenshot](https://raw.githubusercontent.com/Preethi-Dev/Modern-Layout-50/main/assets/screenshot/layout-50-screenshot.png)\n\n```\n✅ Use CSS Grid Line Based Placement\n✅ Use a 12-Column Grid.\n✅ Responsive to each breakpoint\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreethi-dev%2Fmodern-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpreethi-dev%2Fmodern-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpreethi-dev%2Fmodern-layouts/lists"}