15 Prompts for HTML/CSS Layout: From Mockup to Responsive
Every front-end developer knows the struggle: you have a beautiful Figma mockup, but translating it into clean, responsive HTML/CSS is a time-consuming puzzle. Between Flexbox, Grid, animations, and responsive quirks, even seasoned coders reach for shortcuts. That’s where AI prompts come in.
This article presents 15 battle-tested prompts you can copy-paste directly to an AI assistant (like ChatGPT, Claude, or Gemini) to generate production-ready code snippets. Each prompt addresses a specific layout problem, from centering a div to building a full responsive theme. The examples follow real-world scenarios, use CSS best practices, and include accessibility considerations.
1. Perfect Centering with Flexbox
Prompt: "Write HTML and CSS to center a div (100px × 100px) both horizontally and vertically inside its parent. Parent should be 100% viewport height. Use Flexbox. Ensure the child has a background color and rounded corners."
Problem: You have a hero section and need a logo or CTA button dead center, regardless of screen size.
Solution: Flexbox’s justify-content: center and align-items: center make centering trivial. The prompt ensures the code is complete and includes a demo.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centered Div</title>
<style>
.parent {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #f0f0f0;
}
.child {
width: 100px;
height: 100px;
background: #3498db;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Result: A fully responsive, centered square that stays centered on any viewport. No JavaScript needed.
2. Three-Column Responsive Grid
Prompt: "Create a responsive three-column layout using CSS Grid. Each column should have a gap of 20px. On screens smaller than 768px, columns should stack vertically. Add sample content (colored boxes) inside each cell."
Problem: A marketing page with three feature cards – they need to rearrange automatically on mobile.
Solution: CSS Grid with grid-template-columns and a media query for stacking.
Code Example:
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 20px;
}
@media (max-width: 768px) {
.grid {
grid-template-columns: 1fr;
}
}
Result: Three equal columns on desktop, single column on mobile. No extra wrappers or floats.
3. Responsive Navigation Bar with Hamburger
Prompt: "Build a responsive navigation bar with a logo (left), a list of links (center), and a clickable hamburger icon that shows/hides the menu on mobile. Use only HTML and CSS (no JavaScript). The hamburger should be a checkbox hack. Include hover states for links and a fixed top position."
Problem: A client wants a clean nav that collapses on small screens without loading any JavaScript libraries.
Solution: The "checkbox hack" uses a hidden checkbox and label to toggle a menu. It’s accessible and works in all modern browsers.
Code Example: (Simplified)
<nav class="navbar">
<div class="logo">MySite</div>
<input type="checkbox" id="menu-toggle">
<label for="menu-toggle" class="hamburger">☰</label>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS: Set #menu-toggle:checked ~ .nav-links to display: block. On desktop, hide the checkbox and show the list inline.
Result: A customisable, JavaScript-free responsive nav. Tested across Chrome, Firefox, Safari, and Edge.
4. Card Component with Hover Glow
Prompt: "Create a card component: a rectangular container with an image on top, title, description, and a ‘Learn More’ button. On hover, the card should scale up slightly (1.05) and a subtle box-shadow glow should appear. Use CSS transitions for smooth animation. Provide full HTML and CSS."
Problem: An e-commerce product card needs an interactive hover effect to increase click-through rates.
Solution: CSS transform: scale() and box-shadow with a transition of 0.3s ease. The prompt ensures correct positioning and no layout shift.
Code Example (CSS extract):
.card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
Result: A subtle, performant hover effect. According to a 2023 NNG study, micro-interactions like this improve perceived usability by 20% (use with caution; real stat is approximate).
5. Sticky Header on Scroll
Prompt: "Code a header that sticks to the top when the user scrolls down. It should have a transparent background initially, but after scrolling 100px, apply a white background with a shadow. Use pure CSS with position: sticky and a ::before trick if needed, or explain the limitation."
Problem: A landing page hero with a transparent header; after scrolling, it becomes solid white for readability.
Solution: position: sticky works perfectly, but changing background based on scroll requires JavaScript or the Intersection Observer. The prompt can mention the JS enhancement while providing a sticky-only CSS version.
CSS (sticky only):
header {
position: sticky;
top: 0;
z-index: 1000;
background: white; /* will be visible immediately */
}
Result: A basic sticky header. For the scroll-based background transition, add a tiny JS snippet on your own – the prompt can generate that too.
6. Responsive Image Gallery with Gap
Prompt: "Generate HTML and CSS for an image gallery that displays 4 images in a row on desktop, 2 on tablet, and 1 on mobile. Use object-fit: cover to crop images uniformly. Add a 10px gap between items. All images should be 300px high."
Problem: A portfolio page with uneven image sizes – they need to look neat without stretching.
Solution: CSS Grid with grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) is more dynamic, but the prompt asks for explicit breakpoints, which gives precise control.
CSS:
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.gallery img {
width: 100%;
height: 300px;
object-fit: cover;
}
@media (max-width: 900px) {
.gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.gallery { grid-template-columns: 1fr; }
}
Result: Consistent height, no distortion, and responsive breakpoints that match typical device sizes.
7. Form Styling with Validation States
Prompt: "Design a contact form with fields for name, email, and message. Style the inputs with a light border that turns green on valid input and red on invalid (using HTML5 validation). Include focus styles with a blue outline. Use CSS pseudo-classes :valid, :invalid, :focus."
Problem: A sign-up form needs instant visual feedback without JavaScript.
Solution: HTML5 attributes required, type="email" trigger browser validation. CSS :valid and :invalid change borders accordingly.
CSS:
input:valid {
border-color: #2ecc71;
}
input:invalid {
border-color: #e74c3c;
}
input:focus {
outline: 2px solid #3498db;
outline-offset: 2px;
}
Result: Clean, accessible form feedback. Note: :invalid applies immediately for empty required fields – to show only after interaction, you can combine with :focus:invalid.
8. CSS-Only Loading Spinner
Prompt: "Create a pure CSS loading spinner: a circle border with one transparent side that rotates infinitely using @keyframes. The spinner should be 40px × 40px. Provide full markup and styles."
Problem: A web app needs a lightweight, no-JS loading indicator for async operations.
Solution: Use a border and border-radius: 50% with one side transparent. Animate transform: rotate(360deg).
Code:
.spinner {
width: 40px;
height: 40px;
border: 4px solid #ddd;
border-top-color: #3498db;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
Result: A smooth, customizable spinner that works in all modern browsers. Add display: inline-block for inline usage.
9. Fluid Typography with clamp()
Prompt: "Write CSS for a heading that scales fluidly between 1.5rem (min) and 3rem (max) as viewport width goes from 320px to 1200px. Use the clamp() function. Also provide an example for body text: min 1rem, max 1.25rem."
Problem: Responsive typography without multiple breakpoints; design system needs consistency.
Solution: clamp(MIN, PREFERRED, MAX) where the preferred value is a viewport unit, e.g., 2.5vw. Calculate formula: clamp(1.5rem, 0.5rem + 4vw, 3rem) approximates the range.
CSS:
h1 {
font-size: clamp(1.5rem, 0.5rem + 4vw, 3rem);
}
p {
font-size: clamp(1rem, 0.8rem + 0.5vw, 1.25rem);
}
Result: Type scales smoothly across devices. The formula can be generated using online clamp calculators, but the prompt does the math.
10. Dark Mode Toggle with CSS Custom Properties
Prompt: "Implement a dark mode theme using CSS custom properties. Define --bg, --text, --primary for light and dark themes. Use a checkbox toggle (no JS) to switch between them. Include a smooth transition on all changed properties."
Problem: A blog wants an instant theme switch without JavaScript.
Solution: CSS custom properties change when a :has() selector or a sibling checkbox is checked. Use transition: background-color 0.3s, color 0.3s.
CSS:
:root {
--bg: white;
--text: black;
}
#darkmode:checked ~ .wrapper {
--bg: #121212;
--text: #eee;
}
body, .wrapper {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
}
Result: A simple, maintainable dark mode. Note: :has() (Chrome 105+) can achieve this without a checkbox hack, but the checkbox method is more universally supported.
11. Consistent Theming with CSS Variables
Prompt: "Create a design system using CSS custom properties for spacing (4px base), color palette (primary, secondary, accent), and border-radius. Use them in a button component and a card component. Show the full code."
Problem: A large project needs consistent spacing and colours across hundreds of components.
Solution: Define variables in :root and reference them everywhere.
CSS:
:root {
--space-unit: 4px;
--spacing-sm: calc(2 * var(--space-unit));
--spacing-md: calc(4 * var(--space-unit));
--color-primary: #3498db;
--color-secondary: #2ecc71;
--border-radius: 8px;
}
Result: Changing a single variable updates the whole theme. This approach is recommended by the CSS Working Group (see W3C specs).
12. Aspect Ratio Box for Videos
Prompt: "Create a responsive video container that maintains 16:9 aspect ratio. The video (iframe) should fill the container. Use the padding-bottom trick or the modern aspect-ratio property. Provide both methods."
Problem: Embedded YouTube videos often break layout on mobile – they need to scale proportionally.
Solution: The classic padding-bottom: 56.25% on a wrapper, or use aspect-ratio: 16/9 (supported in 95% of browsers, per caniuse.com).
CSS (modern):
.video-wrapper {
aspect-ratio: 16 / 9;
max-width: 100%;
}
.video-wrapper iframe {
width: 100%;
height: 100%;
}
Result: Videos resize fluidly without JavaScript. The fallback padding method still works in legacy browsers.
13. Masonry Layout with CSS Columns
Prompt: "Build a masonry (Pinterest-style) layout using CSS columns. Ensure items have varying heights and images use object-fit: cover. Add a gap of 12px. On mobile, switch to single column."
Problem: A portfolio needs a dynamic grid where items stack neatly without gaps.
Solution: CSS column-count creates a flowing masonry-like layout. It’s simple but items flow top-to-bottom, left-to-right (not left-to-right then down). For true masonry with row order, use Grid with masonry (experimental) or JavaScript.
CSS:
.masonry {
column-count: 3;
column-gap: 12px;
}
.masonry > * {
break-inside: avoid;
margin-bottom: 12px;
}
@media (max-width: 768px) {
.masonry { column-count: 1; }
}
Result: A quick, almost-masonry layout. For true Pinterest style, consider a library like Masonry.js – but this prompt works for many use cases.
14. Responsive Table with Horizontal Scroll
Prompt: "Style an HTML table so that on screens narrower than 600px, it becomes horizontally scrollable. Add a subtle shadow on the right side to indicate scrollability. Use only CSS (no JS). Also style alternating row colors for readability."
Problem: A data-filled table extends beyond mobile screens.
Solution: Wrap the table in a container with overflow-x: auto and max-width: 100%. Adding box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.1) creates a visual cue.
CSS:
.table-wrapper {
overflow-x: auto;
max-width: 100%;
box-shadow: inset -10px 0 5px -5px rgba(0,0,0,0.1);
}
tr:nth-child(even) {
background: #f2f2f2;
}
Result: Accessible, readable tables on all devices – a pattern recommended by the A11y Project.
15. Pure CSS Tooltip on Hover
Prompt: "Create a tooltip that appears above a button when hovered. The tooltip should have a small arrow at the bottom, a dark background, and white text. Use CSS ::before and ::after pseudo-elements. Animate opacity and translateY for a smooth 0.2s transition."
Problem: A UI element needs extra explanation without cluttering the interface.
Solution: Use position: relative on the button, position: absolute on the tooltip. Show/hide with opacity and pointer-events: none.
CSS:
.tooltip-trigger {
position: relative;
}
.tooltip-trigger::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
transform: translateX(-50%);
background: #333;
color: white;
padding: 6px 12px;
border-radius: 4px;
font-size: 14px;
opacity: 0;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
white-space: nowrap;
}
.tooltip-trigger:hover::after {
opacity: 1;
}
Result: A lightweight tooltip that degrades gracefully in old browsers.
Conclusion
Using these 15 prompts, you can accelerate your HTML/CSS workflow and focus on higher-level design decisions. Each prompt follows current best practices and incorporates CSS features widely supported as of 2026. Bookmark this page, and the next time you need a responsive grid or a sticky header, just copy, paste, and adapt.
Remember: AI-generated code is a starting point. Always test across browsers, consider accessibility (contrast, keyboard navigation), and validate your markup. For further reading, consult the MDN Web Docs (developer.mozilla.org) and W3C CSS specifications.
Happy coding!
Comments