76
What does the CSS display property do?
The display property controls how an element generates boxes and participates in layout. Common values include block, inline, inline-block, flex, grid, and none.
HTML & CSS Interview
CSS Layout, Display, Positioning, Flexbox & Grid
CSS interview questions covering normal flow, display, positioning, stacking, overflow, Flexbox, Grid and responsive layout techniques.
25 Questions Filter by level
Interview questions
Open a question for the full answer, code and interview guidance.
77
What is the difference between display: none and visibility: hidden?
display: none removes the element's generated box from normal layout, so surrounding content behaves as if the element were not present. visibility: hidden keeps the element's layout space but makes it invisible.
78
What is the difference between block, inline, and inline-block?
A block box normally starts on a new line and expands in the block direction according to its containing context. An inline box participates within a line of text, and ordinary width and height behavior differs from block layout.
79
What is CSS normal flow?
Normal flow is the default layout process used when elements have not been taken into special positioning or floating schemes. Block-level content generally flows in the block direction, while inline content flows within line boxes.
80
What does the CSS position property do?
The position property controls how an element is positioned and whether offset properties such as top, right, bottom, left, or logical inset properties affect it. Common values are static, relative, absolute, fixed, and sticky.
81
What is the difference between position: relative and position: absolute?
A relatively positioned element remains in normal flow, and offsets move its visual position relative to where it would normally be. It can also establish a positioning reference for absolutely positioned descendants.
82
What is the difference between position: fixed and position: sticky?
A fixed-positioned element is removed from normal flow and is commonly positioned relative to the viewport, so it remains in the same viewport location while the page scrolls.
83
What is z-index and when does it work?
z-index controls the stacking level of positioned elements and certain other layout items within stacking contexts. A larger z-index does not automatically place an element above every element on the page because stacking contexts create independent stacking hierarchies.
84
What is a stacking context in CSS?
A stacking context is a self-contained stacking environment. Elements inside one stacking context are ordered relative to each other, and the entire context is then stacked as one unit relative to sibling contexts.
85
What does the overflow property do?
overflow controls what happens when content exceeds an element's box in a relevant direction. Common values include visible, hidden, clip, auto, and scroll, with overflow-x and overflow-y available for individual axes.
86
What is Flexbox?
Flexbox is a one-dimensional CSS layout system designed to arrange items along a main axis while also controlling alignment on the cross axis. It is well suited to navigation bars, toolbars, card rows, button groups, and many component layouts.
87
What are the main axis and cross axis in Flexbox?
The main axis is the direction in which flex items are laid out. It is controlled primarily by flex-direction. The cross axis is perpendicular to the main axis.
88
What is the difference between justify-content and align-items?
justify-content distributes flex items along the main axis when there is available free space. align-items controls how items are aligned along the cross axis within the flex line.
89
What is the difference between align-items and align-self?
align-items sets the default cross-axis alignment for all flex items in a flex container. align-self allows an individual flex item to override that alignment for itself.
90
What do flex-grow, flex-shrink, and flex-basis mean?
flex-basis defines an item's initial main-size basis before free space is distributed. flex-grow determines how an item can consume positive free space, while flex-shrink determines how it can shrink when the container has insufficient space.
91
What does the flex shorthand property do?
The flex shorthand sets flex-grow, flex-shrink, and flex-basis together. Common patterns include flex: 1 for flexible items that share available space and flex: 0 0 auto for an item that should not grow or shrink from its automatic basis.
92
What does flex-wrap do?
flex-wrap controls whether flex items remain on a single flex line or can wrap onto additional lines when there is insufficient main-axis space. The default is nowrap.
93
What is the gap property?
gap defines spacing between rows and columns in Grid and Flexbox layouts without requiring margins on individual children. row-gap and column-gap can be set independently.
94
What is CSS Grid?
CSS Grid is a two-dimensional layout system designed to control rows and columns together. It is particularly effective for page regions, dashboards, galleries, card grids, and layouts where items need explicit relationships across both dimensions.
95
What is the difference between CSS Grid and Flexbox?
Flexbox is primarily one-dimensional: it lays items out along one main axis at a time. Grid is two-dimensional and can coordinate both rows and columns.
96
What are grid-template-columns and grid-template-rows?
grid-template-columns defines the columns in the explicit grid, while grid-template-rows defines its rows. Track sizes can use fixed lengths, percentages, fractional units, minmax(), repeat(), and other sizing functions.
97
What is the fr unit in CSS Grid?
The fr unit represents a fraction of the available space in a grid container after relevant fixed sizes, gaps, and sizing constraints are considered. It makes proportional track sizing concise.
98
How do repeat(), minmax(), and auto-fit help create responsive grids?
repeat() avoids repeating identical track definitions. minmax() defines a minimum and maximum track size. auto-fit or auto-fill can create as many repeated tracks as fit in the available space.
99
What is the difference between auto-fit and auto-fill in CSS Grid?
Both auto-fit and auto-fill repeat tracks according to available space. auto-fill can preserve empty generated tracks when there is room for more columns, while auto-fit collapses empty repeated tracks so existing items can expand into the available space.
100
How can you center an element with modern CSS?
The best centering technique depends on the layout context. Flexbox can center along both axes with justify-content and align-items, while Grid can use place-items: center. Horizontal block centering can often use auto inline margins when a suitable width or max-width is defined.