Introduction to Flexbox and Grid – HTML Tutorial

Modern web design demands layouts that are responsive, clean, and easy to maintain. CSS provides two powerful layout systems—Flexbox and Grid—to help developers achieve just that. In this tutorial, we’ll introduce you to both Flexbox and Grid and show how they can transform your web layouts.

What is Flexbox?

Flexbox (Flexible Box Layout) is a one-dimensional layout system designed to distribute space along a single row or column.

Key Concepts:

• Main Axis: The direction in which items are laid out (row by default).

• Cross Axis: Perpendicular to the main axis.

• Container: The parent element with display: flex.

• Items: The child elements inside the container.

Basic Flexbox Example:

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Common Flexbox Properties:

• justify-content: Aligns items along the main axis.

• align-items: Aligns items along the cross axis.

• flex-direction: Sets row or column layout.

• flex-wrap: Allows wrapping of items.

What is CSS Grid?

CSS Grid Layout is a two-dimensional system that enables layout in both rows and columns.

Key Concepts:

• Grid Container: The element with display: grid.

• Grid Items: Children of the grid container.

• Grid Tracks: Rows and columns.

• Grid Lines: The lines that form the boundaries of the grid.

Basic Grid Example:

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Common Grid Properties:

• grid-template-columns / grid-template-rows

• grid-gap / gap

• grid-column / grid-row

• grid-area

Flexbox vs Grid: When to Use Which

• Flexbox is ideal for one-dimensional layouts (a row or column).

• Grid is better for two-dimensional layouts (rows and columns).

Use Flexbox for:

• Navigation bars

• Aligning buttons or form inputs

• Horizontal or vertical centering

Use Grid for:

• Entire page layouts

• Complex dashboards

• Magazine-style layouts

Conclusion

Both Flexbox and Grid have revolutionized CSS layout techniques. Mastering these tools will give you full control over how content is displayed on different devices and screen sizes. Whether you're aligning a simple row of buttons or building a complex web app layout, Flexbox and Grid are essential tools for modern web development.

Keywords: CSS Flexbox tutorial, CSS Grid layout, HTML layout techniques, Flexbox vs Grid, responsive layout CSS, modern CSS tutorial