Modern web design relies heavily on CSS Grid and Flexbox to create responsive, adaptable, and visually appealing layouts. While both serve the purpose of arranging elements, they have different use cases and strengths. This guide covers the fundamental concepts, keywords, and practical examples to help you master CSS Grid and Flexbox.

Understanding CSS Flexbox

Flexbox is a one-dimensional layout model, meaning it controls either the row or column layout but not both simultaneously.

Key Concepts & Properties:

1. display: flex – Enables the flexbox model on a container.

2. flex-direction – Defines the direction of flex items (row, column, row-reverse, column-reverse).

3. justify-content – Aligns items along the main axis (flex-start, flex-end, center, space-between, space-around, space-evenly).

4. align-items – Aligns items along the cross axis (stretch, flex-start, flex-end, center, baseline).

5. align-self – Adjusts alignment of individual items.

6. flex-wrap – Allows items to wrap to a new line (nowrap, wrap, wrap-reverse).

7. gap – Adds spacing between flex items.

Example: Basic Flexbox Layout

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.item {
  width: 100px;
  height: 100px;
  background-color: steelblue;
  color: white;
  text-align: center;
  line-height: 100px;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Understanding CSS Grid

CSS Grid is a two-dimensional layout system, meaning it can control both rows and columns simultaneously.

Key Concepts & Properties:

1. display: grid – Enables the grid model.

2. grid-template-columns / grid-template-rows – Defines the column and row structure.

3. grid-gap (gap) – Sets the spacing between grid items.

4. grid-column / grid-row – Controls an item's position in the grid.

5. justify-items – Aligns items along the row (start, center, end, stretch).

6. align-items – Aligns items along the column (start, center, end, stretch).

7. grid-template-areas – Defines named sections of the grid.

Example: Basic Grid Layout

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.item {
  background-color: coral;
  color: white;
  padding: 20px;
  text-align: center;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

When to Use Flexbox vs. Grid

Example: Combining Flexbox and Grid

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}
.sidebar {
  background-color: lightgray;
  padding: 20px;
}
.content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: lightblue;
  padding: 20px;
}

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main Content</div>
</div>

Mastering CSS Grid and Flexbox allows for the creation of flexible, scalable, and responsive layouts. By understanding their properties and knowing when to use each, you can craft modern web designs efficiently.