Basics of Layouts
Layout defines how elements are arranged and positioned on a webpage.
Layouts help organize content properly and create responsive, clean, and structured UI designs.
Why Layouts Are Important?
- Create proper page structure
- Improve responsiveness
- Align elements correctly
- Build modern UI designs
- Improve user experience
Common Types of CSS Layouts
- Block Layout
- Inline Layout
- Inline-Block Layout
- Float Layout
- Position Layout
- Flexbox Layout
- Grid Layout
1. Block Layout
Block elements take the full available width.
Each block element starts on a new line.
Examples
[code theme="dark"]
First
Second
[/code]
Both elements appear on separate lines.
2. Inline Layout
Inline elements only take the width of their content.
They stay on the same line.
Examples
[code theme="dark"]
Hello
World
[/code]
3. Inline-Block Layout
Behaves like inline but also supports width and height.
[code theme="dark"]
.box{
display:inline-block;
width:150px;
height:100px;
}
[/code]
Use Case: Buttons, cards, small layouts.
4. Float Layout
Older method used before Flexbox and Grid.
[code theme="dark"]
.box{
float:left;
width:50%;
}
[/code]
Problems with Float
- Complex alignment
- Clearfix issues
- Hard to maintain
Modern projects mostly use Flexbox and Grid instead.
5. Position Layout
The position property controls exact element placement.
Static
Default positioning.
[code theme="dark"]
.box{
position:static;
}
[/code]
Relative
Moves relative to its normal position.
[code theme="dark"]
.box{
position:relative;
top:20px;
}
[/code]
Absolute
Positions element relative to nearest positioned parent.
[code theme="dark"]
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
right:0;
}
[/code]
Fixed
Element stays fixed on screen during scroll.
[code theme="dark"]
.header{
position:fixed;
top:0;
}
[/code]
Use Case: Sticky navbar.
Sticky
Acts normal until scroll position reaches a limit.
[code theme="dark"]
.sidebar{
position:sticky;
top:20px;
}
[/code]
6. Flexbox Layout
Flexbox is a one-dimensional layout system.
Best for alignment, spacing, navbar, cards, and responsive rows/columns.
Flexbox Example
[code theme="dark"]
.container{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
}
[/code]
Main Flexbox Properties
| Property | Purpose |
| display:flex | Activates flexbox |
| justify-content | Horizontal alignment |
| align-items | Vertical alignment |
| flex-direction | Row or column layout |
| gap | Spacing between items |
Flex Direction Example
[code theme="dark"]
.container{
display:flex;
flex-direction:column;
}
[/code]
Justify Content Values
[code theme="dark"]
justify-content:flex-start;
justify-content:center;
justify-content:space-between;
justify-content:space-around;
[/code]
Align Items Values
[code theme="dark"]
align-items:flex-start;
align-items:center;
align-items:flex-end;
[/code]
Flexbox Use Cases
- Navbar
- Card layouts
- Center alignment
- Buttons alignment
- Responsive sections
7. Grid Layout
CSS Grid is a two-dimensional layout system.
Best for rows and columns together.
Grid Example
[code theme="dark"]
.container{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}
[/code]
Grid Properties
| Property | Purpose |
| display:grid | Activates grid |
| grid-template-columns | Creates columns |
| grid-template-rows | Creates rows |
| gap | Spacing between items |
Responsive Grid Example
[code theme="dark"]
.container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}
[/code]
This automatically adjusts columns based on screen size.
Flexbox vs Grid
|
Flexbox
|
Grid
|
|
One-dimensional
|
Two-dimensional
|
|
Best for alignment
|
Best for page layouts
|
|
Row OR column
|
Rows AND columns
|
|
Simpler layouts
|
Complex layouts
|
Responsive Layouts
Modern layouts should work properly on:
- Mobile
- Tablet
- Laptop
- Desktop
Media Query Example
[code theme="dark"]
@media(max-width:768px){
.container{
flex-direction:column;
}
}
[/code]
Tailwind Layout Classes
Flexbox
[code theme="dark"]
flex
items-center
justify-between
gap-4
[/code]
Grid
[code theme="dark"]
grid
grid-cols-3
gap-6
[/code]
Responsive Tailwind Example
[code theme="dark"]
[/code]
Meaning:
- Mobile → 1 column
- Medium screen and above → 3 columns
Best Practices
- Use Flexbox for alignment
- Use Grid for page layouts
- Avoid old float layouts
- Use responsive design
- Maintain proper spacing
- Keep layout structure clean
Quick Summary
- Block → Full width elements
- Inline → Content width elements
- Inline-Block → Inline + size support
- Float → Old layout method
- Position → Exact element placement
- Flexbox → One-dimensional layouts
- Grid → Two-dimensional layouts
Modern frontend development mainly uses Flexbox and Grid for creating responsive layouts.