Which layout design is easiest to manage on a variety of devices?

Question breakdown

Tests

Choose a CSS layout model suited to responsive design

Difficulty

Easy

Key idea: CSS Grid gives two-dimensional control of rows and columns, so a layout can be rearranged for different viewports with a few media-query changes.

How to reach the answer

1. The clue is 'easiest to manage on a variety of devices', which points to responsive layout.
2. Responsive layouts need content that can be repositioned per screen size without changing the markup.
3. Grid lets you redefine grid-template-columns or grid-template-areas inside a media query to reflow the whole page.
4. Flow is the default and offers no structural control, tables are rigid, and border is a styling property, so Grid is left.

Each option

• AIncorrect. Normal flow is the default block/inline stacking, and it gives no direct control for rearranging regions across screen sizes.
• BIncorrect. Table-based layout is rigid, hard to reflow on small screens, and semantically wrong for page structure.
• CCorrect. Grid defines rows and columns explicitly, and you can redefine them per breakpoint, which makes multi-device layouts simple to manage.
• DIncorrect. Border is a box-model styling property, not a layout system. (BorderLayout is a Java Swing concept, not CSS.)

Common trap: Flow can sound attractive because default flow content is naturally fluid. However, it offers no way to restructure a layout across devices.

In practice: Developers often build a page shell with grid-template-areas and swap the area map inside media queries. For example, a sidebar can sit beside the content on desktop and stack below it on mobile.

Remember: For responsive page-level layouts that need control over both rows and columns, reach for CSS Grid.

Drafted with AI assistance and checked against the answer key.