Web development
Layouts and Responsive Design
Updated Oct 28, 2026
Elements normally follow document flow. Flexbox arranges items along an axis; grid can arrange rows and columns. Use flexible sizes and media queries to adapt to available width. Include the viewport
What you’ll learn
Understand and practise layouts and responsive design.
Explanation
Elements normally follow document flow. Flexbox arranges items along an axis; grid can arrange rows and columns. Use flexible sizes and media queries to adapt to available width. Include the viewport meta tag and test narrow screens as well as larger displays.
ធាតុធម្មតារៀបតាមលំហូរឯកសារ។ Flexbox និង grid ជួយរៀបប្លង់។ ប្រើទំហំបត់បែន និង media query ហើយសាកល្បងអេក្រង់តូច។
Example
A container with display: flex can place cards in a row.
Practice
What should you test when building a responsive page?
Answer and explanation
Show answer / បង្ហាញចម្លើយ
Test at narrow and wide widths and check text, navigation and overflow.
Quick recap
Elements normally follow document flow.