The method
Use this prompt by pasting it into ChatGPT. Provide details about the desired layout, including the number of rows and columns for grid, or alignment needs for flexbox. Specify breakpoints for responsiveness. Ideal for quickly prototyping layouts.
The prompts
Prompt 1
Create a CSS Grid layout for a website with three columns and two rows. The first column should be 200px wide, the second should be flexible (1fr), and the third should be 300px wide. The first row should be 100px high, and the second row should be auto. Add a 20px gap between rows and columns. Make it responsive such that on screens smaller than 768px, the layout becomes a single column.
Prompt 2
Generate the CSS code for a Flexbox layout. This layout should have a header, a main content area, and a footer. The header and footer should be fixed heights of 50px each, and the main content area should fill the remaining vertical space. Horizontally, the header should have left-aligned logo, center-aligned navigation, and right-aligned user profile links. The main content should be centered. The footer should have centered copyright information. The entire layout should be vertically centered on the page, with margin: 0 auto and max-width: 960px.
Prompt 3
I need CSS Flexbox code for a navigation bar that spans the entire width of the screen. It should contain three items equally spaced apart: 'Home', 'About', and 'Contact'. On smaller screens (below 600px), the navigation items should stack vertically. The background color should be #333, and the text color should be white. Use media queries for responsiveness. Include all necessary CSS rules and HTML structure.
Prompt 4
Write the CSS code to create a responsive grid layout for an image gallery. The gallery should have 4 columns on large screens (1200px and above), 3 columns on medium screens (768px - 1199px), 2 columns on small screens (480px - 767px), and 1 column on extra small screens (below 479px). Each image should maintain a 1:1 aspect ratio. Implement a gap of 10px between the images. Assume the HTML structure consists of a container element with multiple image elements inside.