css flexbox and grid layouts.

CSS Flexbox and Grid Layout: A Beginner-Friendly Guide

Introduction

Modern web design requires layouts that are flexible, responsive, and easy to maintain. In the past, developers relied heavily on floats and positioning, which were difficult to manage and not designed for layouts.

CSS layout has come a long way. Not too long ago, building layouts meant wrestling with floats, clearfix hacks, and unpredictable positioning issues. Today, we have two powerful layout systems built directly into CSS: Flexbox and Grid.

These modern layout tools have replaced older techniques with cleaner, more flexible approaches, making it easier than ever to build responsive, scalable interfaces. But one common question still remains:

When should you use Flexbox, and when should you use CSS Grid?

This article breaks it down clearly — when to use each, how they differ, and why using them together often leads to the best results.

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a one-dimensional layout system designed to arrange items in a single direction or to simplify the process of aligning and spacing elements in a row or a column.

Flexbox shines when working with UI components and small-scale layouts. It removes the need for floats and complicated positioning tricks, making layouts more predictable and easier to maintain.

Flexbox makes it easy to:

• Align items
• Distribute space between items
• Create responsive layouts without floats or positioning

Flexbox is best suited for one-dimensional layouts.

Flexbox Components

A Flexbox layout always consists of two main parts:

1. Flex Container

The parent element becomes a flex container when its display property is set to flex or inline-flex.

.container {
display: flex;
}

2. Flex Items

Once display: flex is applied, all direct children become flex items.

Basic Flexbox Example

<divclass="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

.container {
display: flex;
background-color: dodgerblue;
}

.containerdiv {
background-color:#f1f1f1;
margin:10px;
padding:20px;
}

This creates a horizontal layout by default.

CSS Flex Container Properties

1. flex-direction

Flexbox layouts revolve around two axes:

Main axis — defined by flex-direction

Cross axis — perpendicular to the main axis

flex-direction: row;/* default */
flex-direction: column;
flex-direction: row-reverse;
flex-direction: column-reverse;

2. flex-wrap

By default, flex items try to stay on a single line. You can change this using flex-wrap:

flex-wrap: nowrap;/* default */
flex-wrap: wrap;
flex-wrap: wrap-reverse;

3. flex-flow

Shorthand for flex-direction and flex-wrap.

flex-flow: row wrap;

Aligning Items with Flexbox

justify-content (Main Axis Alignment)

Used to align items horizontally.

justify-content: flex-start;/* default */
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

align-items (Cross Axis Alignment)

Used to align items vertically.

align-items: stretch;/* default */
align-items: center;
align-items: flex-start;
align-items: flex-end;

• align-self — aligns a single item differently
• order — changes visual order without changing HTML

This makes Flexbox perfect for:

• Navigation bars
• Button groups
• Cards
• Headers and footers

CSS Grid Layout — A Complete Beginner-Friendly Guide

What is CSS Grid Layout?

CSS Grid Layout is a powerful layout system in CSS that allows developers to design web pages using rows and columns.

Unlike older layout methods such as floats or positioning, CSS Grid makes it easy to build complex, responsive layouts in a clean and readable way.

With CSS Grid, you can:

• Control both horizontal and vertical layouts
• Design responsive pages without hacks
• Create structured layouts like dashboards, blogs, and landing pages easily

Flexbox vs CSS Grid

Feature Flexbox CSS Grid Layout Type One-dimensional Two-dimensional Direction Row or Column Rows and Columns Best Used For Navigation bars, cards, components Page layouts, dashboards Control Content-based Layout-based

Flexbox controls alignment of items

Grid controls the entire page structure

Core Components of CSS Grid

Every CSS Grid layout consists of two main parts:

1. Grid Container

The parent element that defines the grid.

Get Pinithi Ransara’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

An element becomes a grid container when:

display: grid;

or

display: inline-grid;

2. Grid Items

All direct children of the grid container automatically become grid items.

Creating a Basic Grid Container

.container {
display: grid;
}

This simple rule activates the grid system.

Defining Grid Tracks (Rows & Columns)

Grid tracks are the rows and columns inside the grid.

Important Properties

• grid-template-columns
• grid-template-rows
• grid-template-areas

grid-template-columns

Defines how many columns the grid has and their sizes.

Common Values

Auto columns

grid-template-columns: auto auto auto;

Creates 3 equal-width columns.

Fixed widths

grid-template-columns:100px200px150px;

Fractional units (fr)

grid-template-columns:1fr1fr1fr;

Each column takes equal space.

grid-template-columns:1fr2fr1fr;

Middle column is twice as wide.

repeat() function

grid-template-columns:repeat(3,1fr);

minmax() function

grid-template-columns:minmax(80px,1fr)150px150px;

grid-template-rows

Defines the height of rows.

grid-template-rows:80px200px;

Supports:

• Fixed units
• fr
• auto
• repeat()
• minmax()

CSS 12-Column Grid Layout

A 12-column grid is one of the most widely used layout systems in modern web design.

Why 12 Columns?

• Highly divisible (2, 3, 4, 6)
• Perfect for responsive layouts
• Consistent structure across devices

Creating a 12-Column Grid

.container {
display: grid;
grid-template-columns:repeat(12,1fr);
}

This creates 12 equal-width columns.

Placing Items in a 12-Column Grid

To span columns:

.item {
grid-column: span6;
}

To start at a specific column:

.item {
grid-column:3 / span4;
}

CSS Grid Items

All direct children of a grid container are grid items.

Grid items can:

• Span multiple columns
• Span multiple rows
• Be positioned precisely

Spanning Grid Items

Columns

.item {
grid-column-start:1;
grid-column-end:3;
}

Shorthand:

.item {
grid-column:1 / span2;
}

Rows

.item {
grid-row-start:1;
grid-row-end:3;
}

Shorthand:

.item {
grid-row:1 / span2;
}

Spanning Both Rows and Columns

.item {
grid-column:1 / span2;
grid-row:1 / span2;
}

Naming Grid Areas

You can name sections of your layout using grid-template-areas.

Example

.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}

.header {grid-area: header; }

Empty spaces are represented using a dot (.)

Aligning Grid Items

Horizontal Alignment

justify-self: center;

Values:

• start
• end
• center
• stretch

Vertical Alignment

align-self: center;

Shorthand

place-self: center;

Align All Items from Container

.container {
justify-items: center;
align-items: center;
}

Ordering Grid Items

The order property controls visual order, not HTML order.

.item1 {order:3; }
.item2 {order:1; }

Screen readers follow HTML order, not visual order.

When to Use CSS Flexbox

Use Flexbox when:

• You’re building small layouts
• You need to align items
• The layout flows in one direction
• Content size is unknown or dynamic
• You’re working on UI components

Flexbox is fast, intuitive, and perfect for local layout problems.

When to Use CSS Grid

Use Grid when:

• You’re building complex layouts
• You need rows and columns together
• You want consistent alignment across rows
• You need gaps between rows and columns
• You want layout-first design control
• You need overlapping elements without hacks

Grid excels at page-level structure and consistency.

Final Thoughts

CSS Grid is one of the most powerful layout tools in modern web development.

Once you understand containers, tracks, and items, creating complex layouts becomes simple and intuitive.

If you’re serious about frontend development — CSS Grid is non-negotiable

Conclusion

CSS Flexbox and Grid have transformed modern web design. Flexbox simplifies one-dimensional layouts and alignment, while Grid provides complete control over two-dimensional page structures.

By understanding when and how to use Flexbox and Grid together, developers can create responsive, clean, and professional layouts with ease. Mastering these two layout systems is an essential skill for any front-end developer.

🔗 Reference

W3Schools — CSS Flexbox & Grid https://www.w3schools.com/

Blog Rocket — https://blog.logrocket.com/

MilesWeb — https://www.milesweb.in/blog/website-design/what-is-css/