All 46 questions
How do Flexbox and Grid differ, and when would you choose each for a layout?
Asked in 8 of 157 interviews · last asked Oct 7 · Concept · Junior
Show answer
Flexbox lays out items in one direction at a time: a row or a column. Grid controls rows and columns together. I would use Flexbox for a navigation bar and Grid for a card layout that needs alignment across both rows and columns.
- Flexbox can wrap, but each line distributes space separately.
- Grid keeps items aligned across shared rows and columns.
- At breakpoints, Flexbox can change direction; Grid can change columns or rearrange areas.
- You can use Grid for the page layout and Flexbox inside its sections.
What the interviewer checks: The interviewer is checking whether you can choose a layout tool based on alignment and responsive layout needs.
Common mistake (in 3 of 6 reviewed answers): Many answers forget that alignment across both rows and columns and layout changes at breakpoints should guide the choice.
Other ways it was asked
- “What is the difference between Flexbox and CSS Grid?”
- “What is the difference between Flexbox and Grid?”
- “What is the difference between CSS Flexbox and CSS Grid?”
How would you build a responsive interface that adapts from desktop to mobile without duplicating markup?
Asked in 4 of 157 interviews · last asked Oct 8 · Scenario · Mid-level
Show answer
I would use one semantic HTML structure, with mobile-first CSS and Grid or Flexbox. I would use flexible widths and choose breakpoints based on where the content stops fitting well, not specific devices. On wider screens, media queries would adjust columns, spacing, and sizes to match the desktop design.
- Include the viewport meta tag so mobile browsers use the device width.
- Make images flexible and avoid fixed widths that cause horizontal scrolling.
- Keep reading and keyboard navigation order logical across layouts.
- Test between breakpoints, on real devices, and with zoom; keep touch controls large enough.
What the interviewer checks: The interviewer is checking whether you can adapt one page structure across screen sizes without harming usability or accessibility.
Other ways it was asked
- “What CSS layout approach and breakpoint strategy would you use to match a desktop design closely and reflow it cleanly on mobile without duplicating markup?”
- “Can you provide an example of a responsive front end component you built with React JS, and what considerations did you make for different screen sizes and devices?”
- “How do you make a user interface work well across mobile and desktop screen sizes?”
How do container queries work, and when would you use them instead of media queries?
Asked in 2 of 157 interviews · last asked Oct 12 · Concept · Mid-level
Other ways it was asked
- “When building a responsive layout, how do you decide between media queries and container queries, and what is one case where container queries are clearly better?”
- “When and how do you use CSS container queries?”
- “What is the difference between media queries and container queries?”
When implementing a pixel-perfect design, how do you structure spacing and typography so it stays consistent across breakpoints without duplicating lots of CSS?
Asked in 2 of 157 interviews · last asked Jul 28 · Tooling · Mid-level
Other ways it was asked
- “In a pixel-perfect build, how do you keep typography consistent across breakpoints, font size, line height, and letter spacing while still being responsive?”
How do you use Tailwind CSS to create responsive designs in enterprise dashboard projects?
Asked in 2 of 157 interviews · last asked Jul 11 · Tooling · Mid-level
Other ways it was asked
- “How does Tailwind help with responsive design?”
What is the difference between Flexbox and float in CSS?
Asked once · last asked Mar 5 · Concept · Junior
What does `display: flex` do, and when would you use it?
Asked once · last asked Mar 20 · Concept · Junior
What does `align-items: center` do in CSS Flexbox?
Asked once · last asked Mar 20 · Concept · Junior
How would you make a frontend responsive with CSS media queries, and how would provided screen layouts guide your implementation?
Asked once · last asked Mar 20 · Scenario · Mid-level
What specific techniques do you use to achieve responsiveness in web design?
Asked once · last asked May 23 · Concept · Junior
How would you structure a responsive card grid using semantic HTML—lists versus divs—and what CSS approach would you use for layout at different breakpoints?
Asked once · last asked Jun 7 · Scenario · Mid-level
How do you typically implement responsive typography in CSS, for example using clamp, and what factors do you choose for the min, preferred, and max values?
Asked once · last asked Jul 16 · Tooling · Mid-level
When implementing a responsive UI component, how do you decide between REM, em, percent, viewport units, and PX for typography and spacing across breakpoints?
Asked once · last asked Jul 22 · Scenario · Mid-level
When you’re aiming for pixel-perfect spacing with CSS Grid, how do you avoid unexpected gaps?
Asked once · last asked Jul 22 · Scenario · Mid-level
How do you determine the sizes attribute values for srcset so the browser selects the right image across breakpoints?
Asked once · last asked Jul 26 · Concept · Mid-level
When building a responsive dashboard grid, how do you make it responsive without media queries or with minimal ones, and what CSS approach do you use?
Asked once · last asked Jul 26 · Tooling · Mid-level
When an element must be visually centered inside a container, but the design shows different left and right padding at some breakpoints, how do you implement that without breaking alignment?
Asked once · last asked Jul 28 · Scenario · Mid-level
Explain the Bootstrap grid system.
Asked once · last asked Aug 12 · Concept · Junior
In Bootstrap, what is the difference between .container and .container-fluid?
Asked once · last asked Aug 12 · Concept · Junior
How do breakpoints work in Bootstrap?
Asked once · last asked Aug 12 · Concept · Mid-level
What are Bootstrap cards, modals, alerts, badges, and toasts, and how do they differ?
Asked once · last asked Aug 12 · Concept · Junior
How does right-to-left (RTL) support work in Bootstrap?
Asked once · last asked Aug 12 · Concept · Mid-level
In a responsive card grid, how do you keep consistent spacing and alignment as the number of columns changes without relying on hard-coded widths?
Asked once · last asked Aug 15 · Scenario · Mid-level
How do you handle a fixed header on mobile so it does not cover the top of anchored content?
Asked once · last asked Aug 15 · Scenario · Mid-level
When a layout uses flexbox and a sidebar should wrap below the main content on small screens, what flex properties and breakpoint changes do you typically apply?
Asked once · last asked Aug 15 · Scenario · Mid-level
Flexbox vs Grid — when is it better to use one rather than the other?
Asked once · last asked Aug 25 · Concept · Mid-level
How can flex-direction help a navigation or content section adapt from desktop to mobile?
Asked once · last asked Sep 15 · Concept · Junior
How would you use Bootstrap to stack three horizontally displayed cards vertically on mobile?
Asked once · last asked Sep 30 · Tooling · Junior
What is the difference between flex-basis: 0 and flex-basis: auto?
Asked once · last asked Oct 12 · Concept · Mid-level
How would you build a responsive screen from a visual design and integrate it with a backend? Which tools or libraries would you use, and can you describe an example?
Asked once · last asked Oct 20 · Tooling · Mid-level
How would you structure and implement four content boxes using HTML and CSS?
Asked once · last asked Mar 20 · Scenario · Junior
Other ways it was asked
- “How would you style a group of four content boxes using CSS?”
Which CSS property or layout method would you use to arrange a group of boxes?
Asked once · last asked Mar 20 · Concept · Junior
How do you make a front end responsive?
Asked once · last asked May 26 · Concept · Junior
How would you build a layout to match a desktop design closely?
Asked once · last asked Jul 22 · Scenario · Mid-level
How do you handle responsive images in HTML and CSS?
Asked once · last asked Jul 26 · Concept · Mid-level
What is grid in CSS?
Asked once · last asked Jul 31 · Concept · Junior
What minimum viewport width does Bootstrap's md breakpoint target?
Asked once · last asked Aug 12 · Concept · Junior
In Bootstrap, what is the difference between d-none, d-block, and d-flex?
Asked once · last asked Aug 12 · Concept · Junior
What is a Bootstrap navigation bar, and what is it used for?
Asked once · last asked Aug 12 · Concept · Junior
When you build a page to look good across screen sizes, what is your usual process?
Asked once · last asked Aug 15 · Scenario
What is Bootstrap?
Asked once · last asked Aug 27 · Concept · Junior
Other ways it was asked
- “What is bootstrap?”
What is responsive design in UI?
Asked once · last asked Sep 27 · Concept · Junior
What is the mobile-first approach in web development?
Asked once · last asked Oct 6 · Concept · Junior
How would you size an embedded chart so that it occupies only part of an Angular page?
Asked once · last asked Oct 9 · Tooling · Mid-level
When and how do you use CSS media queries?
Asked once · last asked Oct 12 · Concept · Junior
How can you center a div inside its parent using Flexbox?
Asked once · last asked Oct 19 · Concept · Junior
More HTML and CSS interview questions
- All HTML and CSS interview questions
- HTML Basics and Semantic HTML Interview Questions
- Browser Rendering and Web Performance Interview Questions
How this list is made
Every question here was asked by a real interviewer in a real job interview that a candidate ran MeetAssist in. After the call, the interviewer's questions are pulled from the transcript. Practice sessions, tests, exams and anything that was not a job interview are dropped.
Questions are rewritten so they make sense on their own: names of people, employers and clients are removed, and speech-to-text mistakes are fixed. Small talk, logistics and questions about one candidate's own résumé are left out. Rephrasings of the same question are merged, and the count is the number of different interviews it came up in.
The interviews come from candidates who use MeetAssist, so they lean towards software, data and AI roles: the shares describe these interviews, not every HTML and CSS interview. Answers to the most asked questions are written and checked by an editor; a "common mistake" is shown only when reviews of real answers in these interviews show it, with the count.
157 interviews, 125 candidates, Oct 2025 to Oct 2026. Updated every month with new interviews.
Or add the Chrome extension