The method
Use this prompt by pasting it directly into your LLM of choice. Tweak the number of columns and desired responsiveness (breakpoints) to generate CSS Grid code adaptable to different screen sizes. Copy and paste the CSS directly into your project.
The prompts
Prompt 1
I need to create a responsive CSS Grid layout for a website. Generate CSS code for a grid with 3 columns on desktop, 2 columns on tablet, and 1 column on mobile. Provide the CSS code, including media queries for screen sizes less than 768px (tablet) and less than 480px (mobile). Ensure the grid items fill the available space without overflowing. Use `fr` units for flexible column sizing. Provide a complete, copy-paste ready CSS snippet.
Prompt 2
Create a CSS Grid layout for a gallery. On large screens (1200px and up), display 5 columns. On medium screens (768px - 1199px), display 3 columns. On small screens (below 768px), display 1 column. Include CSS to ensure the grid items maintain a 1:1 aspect ratio to create square images. Use `grid-gap` to create a visually appealing space between the images. Use a mix of `fr` and fixed width units for column definitions to control the layout's overall balance across the different screen sizes. Provide the complete CSS.