A developer wants to create a text container that breaks into three columns on wide screens but remains a single column on small devices. Which CSS property combination should be used to achieve this responsive multi-column layout?
- column-count: 3; column-width: auto;
- columns: 3 auto;
- flex: 1 0 33%;
- grid-template-columns: repeat(3, 1fr);
To achieve a responsive multi-column layout, using the grid-template-columns property with repeat ensures three columns on wide screens while maintaining a single column on small devices.
Loading...
Related Quiz
- In the context of web design, what does DPI stand for?
- To create a layout that adapts to different screen sizes, developers use ________ queries in CSS.
- If a developer is troubleshooting an issue where a CSS rule is not being applied, and they notice that the rule is being overridden by another rule, what should they first check regarding the non-applied rule?
- The CSS property ________ can be used to force an element to contain its floated children.
- With PostCSS, developers can write plugins to create custom ________ for their projects.