CSS Layout Types

CSS provides several layout techniques to arrange elements on a webpage:

• Normal Flow
• Float Layout
• Positioning (static, relative, absolute, fixed, sticky)
• Flexbox Layout
• Grid Layout
• Multi-column Layout
• Table Layout
• Responsive Layout

"Layout and Stuff"

Type	Description & Examples
Normal Flow	Elements are positioned according to the natural flow of the document. <div>...</div>
Float Layout	Elements float to the left or right. img { float: left; }
Positioning	Elements can be positioned using position: static | relative | absolute | fixed | sticky; div { position: absolute; top: 10px; left: 20px; }
Flexbox Layout	Flexible box layout for arranging items in rows or columns. display: flex;
Grid Layout	Two-dimensional grid-based layout. display: grid;
Multi-column Layout	Content flows into multiple columns. column-count: 3;
Table Layout	Layout using table elements or display: table;. display: table;
Responsive Layout	Layout adapts to different screen sizes using media queries. @media (max-width: 600px) { ... }