Building Responsive Layouts Using CSS Display
The CSS display property is essential for building responsive layouts. By combining different display values with media queries, you can create flexible, adaptive designs.
display: flex– Use Flexbox for one-dimensional layouts (row or column). Flex items can wrap withflex-wrap, and alignment can be controlled withjustify-contentandalign-items. Perfect for responsive navbars, card rows, or grids that adjust on smaller screens.display: grid– Use Grid for two-dimensional layouts. You can define explicit columns and rows withgrid-template-columnsandgrid-template-rows, and adjust them with media queries to make layouts adapt at different breakpoints.display: inline,inline-block,inline-flex,inline-grid– These allow elements to flow inline with text or other inline elements, useful for smaller components or inline menus.display: contents– Remove unnecessary wrapper boxes while keeping children in the layout. Can simplify responsive designs but use carefully for accessibility.
In this example, the container uses display: flex with flex-wrap: wrap, so child elements automatically wrap to the next line when the viewport is too narrow, creating a responsive layout without changing the HTML.
Use
flexorgridfor main layout sections that need to adjust across screen sizes.Combine display properties with media queries to change layout direction or column count responsively.
Use
inline-*values for small components that need to flow with text or inline content.Test layouts at multiple viewport sizes to ensure proper wrapping and alignment.