๐๐ฑ๐๐ฎ๐ป๐ฐ๐ฒ๐ฑ ๐๐ฆ๐ฆ ๐๐ฎ๐๐ผ๐๐๐ ๐ถ๐ป ๐ฃ๐ฟ๐ฎ๐ฐ๐๐ถ๐ฐ๐ฒ
CSS layout tools changed. You now build responsive sites without JavaScript.
CSS Grid handles rows and columns.
- Use grid-template-areas for naming.
- Use auto-fit and auto-fill for responsiveness.
Container queries make components respond to container size. They ignore viewport size. A card component adjusts its layout based on available space.
Subgrid shares parent grid sizing with children. It aligns items in nested containers. This works well for card grids with headers and footers.
Use Flexbox for one dimension. Use Grid for two dimensions. Use Grid for the page and Flexbox for cells.
Native CSS now has custom properties and nesting. You might not need Sass or Less.
Grid order does not change DOM order. Screen readers follow the DOM. Keep your source order logical.