DEV Community

Cover image for CSS Layouts
Yash Kalbhute
Yash Kalbhute

Posted on

CSS Layouts

💠 Mastering CSS Layouts – Box Model, Flexbox, Grid & Positioning

Learn how to structure your web pages using the box model, layout techniques like Flexbox and Grid, and element positioning with real-world examples.

🔹 Box Model: Margin, Padding, Border

Every HTML element is a box. The CSS Box Model defines how the element’s size and spacing are calculated.

[ Margin ]
[ Border ]
[ Padding ]
[ Content ]
Enter fullscreen mode Exit fullscreen mode

📘 CSS Properties: 

.box {
  width: 200px;
  padding: 20px;
  border: 2px solid black;
  margin: 30px;
  background-color: #f5f5f5;
}
Enter fullscreen mode Exit fullscreen mode

✅ Output: 

<div style="padding: 20px; border: 2px solid black; margin: 30px;">
  I'm a box with padding, margin, and a border.
</div>
Enter fullscreen mode Exit fullscreen mode
  • margin: space outside the element
  • border: visible outline
  • padding: space inside the box
  • width: sets the content width

🔹 Display Property

The display property determines how elements are visually placed.

Value Description
block Full width, new line
inline Flows with text, no line break
inline-block Like inline but can set width/height
flex Enables Flexbox layout
grid Enables Grid layout
none Hides the element

📘 Example: 

<span style="display: block;">I'm a block span!</span>
Enter fullscreen mode Exit fullscreen mode

This span will behave like a div — occupying full width.

🔹 Flexbox: One-Dimensional Layout

Flexbox arranges elements in a row or column, making spacing and alignment much easier.

📘 Example: 

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="container" style="display: flex; justify-content: space-around;">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

🔑 Common Flex Properties

Property What it does
display: flex Enables flexbox
flex-direction row, column, row-reverse, column-reverse
justify-content Aligns horizontally (main axis)
align-items Aligns vertically (cross axis)
gap Adds spacing between items

🔹 CSS Grid: Two-Dimensional Layout

Grid allows placing elements in both rows and columns.

📘 Example: 

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
Enter fullscreen mode Exit fullscreen mode 
<div class="grid-container" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Enter fullscreen mode Exit fullscreen mode

🔑 Grid Key Terms

Term Description
grid-template-columns Defines column sizes
grid-template-rows Defines row sizes
gap Adds spacing between items
grid-column, grid-row Span columns/rows

🔹 Positioning in CSS

Positioning allows elements to be placed precisely on the page.

📘 Values:

Value Behavior
static Default, follows document flow
relative Offset relative to itself
absolute Positioned relative to nearest positioned ancestor
fixed Stays in place on scroll
sticky Scrolls with page, then sticks when reaching top

📘 Example: 

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
}
Enter fullscreen mode Exit fullscreen mode 
<div style="position: relative; top: 20px; left: 30px;">
  I’m offset from my original position.
</div>
Enter fullscreen mode Exit fullscreen mode

🔹 Z-Index (Stacking Order)

Controls which elements appear on top when they overlap.

.box1 {
  z-index: 1;
  position: absolute;
}

.box2 {
  z-index: 2;
  position: absolute;
}
Enter fullscreen mode Exit fullscreen mode

Higher z-index = shown in front.

✅ Summary

By mastering these layout systems, you gain full control over how your web pages look and feel:

  • Understand the Box Model for perfect spacing
  • Use Flexbox for horizontal/vertical arrangements
  • Use Grid for responsive two-dimensional layouts
  • Use position and z-index for layering and exact placement

🧠 Pro Tip: Combine Grid for macro layouts and Flexbox for internal alignments.

Author: Yash Kalbhute

🔧 Built with <>DevSync by Yash— Crafting cleaner UIs and layouts with modern CSS practices.

Top comments (0)