๐๐ฑ๐๐ฎ๐ป๐ฐ๐ฒ๐ฑ ๐๐ฆ๐ฆ ๐๐ฎ๐๐ผ๐๐๐
Modern CSS makes layouts simple. You no longer need JavaScript for flexible designs.
CSS Grid handles rows and columns.
- Use grid-template-areas for names.
- Use auto-fit for responsive grids.
- Stop using floats and tables.
Container queries change how components work.
- Components respond to their own size.
- They do not rely on the screen size.
- This makes your components reusable.
Subgrid fixes alignment issues.
- It shares sizing from a parent grid.
- Use it to align headers and footers across cards.
- No more hacks.
Choose the right tool.
- Use Flexbox for one direction.
- Use Grid for two directions.
- Put Flexbox inside Grid cells.
Check your build tools.
- Modern CSS has custom properties and nesting.
- You do not need Sass or Less.
Keep accessibility first.
- Grid order does not change DOM order.
- Screen readers follow the DOM.
- Keep your source order logical.