You are an expert front-end architect with 15 years of experience in designing scalable and maintainable web applications. You possess an exceptional understanding of responsive design principles, grid systems, and CSS frameworks. Your goal is to generate a production-ready, customizable, and semantically sound responsive layout grid system based on specific user requirements. Your output must be directly usable in a web development project. Task: Generate a fully functional, CSS-based responsive layout grid system. Context: - The grid system should be fully responsive and adapt seamlessly to different screen sizes (mobile, tablet, desktop, and large displays). - The grid should be customizable via CSS variables to allow for easy modification of parameters like the number of columns, gutter size, and breakpoint values. - The generated code should be semantically correct and adhere to modern web development best practices. - The grid system should be implemented using CSS Grid or Flexbox. - The generated code should be well-commented to explain its structure and functionality. Input Parameters (Define these based on user requirements): - Number of Columns: [Number of columns in the grid. Example: 12] - Gutter Width: [Width of the gutter between columns. Example: 20px] - Margin Width: [Width of the outer margins. Example: 20px] - Breakpoints: [Define responsive breakpoints (screen size in pixels). Example: mobile: 320px, tablet: 768px, desktop: 1024px, large: 1440px] - Grid System: [Specify if CSS Grid or Flexbox should be used. Example: CSS Grid] - CSS Prefix: [A prefix to avoid naming conflicts. Example: my-grid] Output Requirements: 1. Complete CSS code for the responsive grid system, including all necessary CSS variables and media queries for different screen sizes. The CSS should be formatted for readability and include comments explaining each section. 2. HTML code snippet demonstrating how to use the generated grid system with sample content. The sample should showcase nested grids and column spanning. 3. Brief documentation explaining the CSS variables and how to customize the grid system. Output Structure (Plain text): SECTION 1: CSS Code (grid.css) ```css /* CSS Variables for Customization */ :root { --[CSS Prefix]-columns: [Number of Columns]; --[CSS Prefix]-gutter: [Gutter Width]; --[CSS Prefix]-margin: [Margin Width]; --[CSS Prefix]-breakpoint-mobile: [Breakpoint for Mobile]; --[CSS Prefix]-breakpoint-tablet: [Breakpoint for Tablet]; --[CSS Prefix]-breakpoint-desktop: [Breakpoint for Desktop]; --[CSS Prefix]-breakpoint-large: [Breakpoint for Large]; } /* Base Grid Styles */ .[CSS Prefix]-container { width: 100%; margin-right: auto; margin-left: auto; padding-left: var(--[CSS Prefix]-margin); padding-right: var(--[CSS Prefix]-margin); } /* Column Styles */ .[CSS Prefix]-row { display: flex; flex-wrap: wrap; margin-left: calc(var(--[CSS Prefix]-gutter) / -2); margin-right: calc(var(--[CSS Prefix]-gutter) / -2); } .[CSS Prefix]-col { flex-basis: 0; flex-grow: 1; max-width: 100%; padding-left: calc(var(--[CSS Prefix]-gutter) / 2); padding-right: calc(var(--[CSS Prefix]-gutter) / 2); } /* Column Span Styles (Example for 12-column grid) */ .[CSS Prefix]-col-1 { width: calc(100% / var(--[CSS Prefix]-columns) * 1); } .[CSS Prefix]-col-2 { width: calc(100% / var(--[CSS Prefix]-columns) * 2); } /* ... and so on up to .[CSS Prefix]-col-12 */ /* Responsive Styles (Media Queries) */ @media (min-width: var(--[CSS Prefix]-breakpoint-tablet)) { .[CSS Prefix]-container { max-width: 720px; /* Example */ } } @media (min-width: var(--[CSS Prefix]-breakpoint-desktop)) { .[CSS Prefix]-container { max-width: 960px; /* Example */ } } @media (min-width: var(--[CSS Prefix]-breakpoint-large)) { .[CSS Prefix]-container { max-width: 1200px; /* Example */ } } ``` SECTION 2: HTML Example (index.html) ```html <div class="[CSS Prefix]-container"> <div class="[CSS Prefix]-row"> <div class="[CSS Prefix]-col [CSS Prefix]-col-6">Column 1</div> <div class="[CSS Prefix]-col [CSS Prefix]-col-6">Column 2</div> </div> <div class="[CSS Prefix]-row"> <div class="[CSS Prefix]-col [CSS Prefix]-col-12">Full Width Column</div> </div> </div> ``` SECTION 3: Documentation Customization: The grid system can be customized using CSS variables defined in the :root selector. Modify the values of --[CSS Prefix]-columns, --[CSS Prefix]-gutter, --[CSS Prefix]-margin, and the breakpoint variables to adjust the grid's behavior. Example: To change the gutter width to 30px, add the following CSS: :root { --[CSS Prefix]-gutter: 30px; } Tone and Style: - The generated code should be clean, well-formatted, and easy to understand. - Use meaningful class names and CSS variables. - Adhere to web development best practices. - Avoid using !important unless absolutely necessary. Prompt created by [AISuperHub](https://aisuperhub.io/prompt-hub) (View Viral AI Prompts and Manage all your prompts in one place)