Web development
Flexbox and Grid
Updated Oct 28, 2026
Flexbox arranges items along a main axis and can wrap them. CSS Grid provides rows and columns for two-dimensional layouts. Set gaps and allow items to shrink or wrap rather than forcing content outsi
What you’ll learn
Understand and practise flexbox and grid.
Explanation
Flexbox arranges items along a main axis and can wrap them. CSS Grid provides rows and columns for two-dimensional layouts. Set gaps and allow items to shrink or wrap rather than forcing content outside the screen.
Flexbox រៀបធាតុតាមអ័ក្សមួយ និងអាច wrap។ Grid រៀបជាជួរដេក និងជួរឈរ។ អនុញ្ញាតឱ្យធាតុបត់ ឬបង្រួមដើម្បីជៀសវាង overflow។
Example
Use display: flex; flex-wrap: wrap; gap: 1rem; on a card container.
Practice
What does flex-wrap: wrap allow?
Answer and explanation
Show answer / បង្ហាញចម្លើយ
Items can move onto another line when they do not fit.
Quick recap
Flexbox arranges items along a main axis and can wrap them.