CSS Layout Techniques

This chapter explores Flexbox and Grid, powerful CSS layout techniques used with <div> or semantic elements like <section> to create modern, responsive layouts. Learn how to arrange content effectively with examples and colorful previews.

Why Use CSS Layout Techniques?

Flexbox and Grid provide flexible ways to arrange content within <div> or semantic containers, replacing outdated methods like floats. They simplify responsive design, improve alignment, and enhance user experience across devices, while maintaining compatibility with semantic HTML for SEO and accessibility.

Using Flexbox

Flexbox is a one-dimensional layout system that arranges items in a row or column. It’s ideal for navigation bars, card layouts, or aligning content within a <nav> or <section>.

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

<style>
  .flex-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .flex-container div {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>
  

Preview:

Using Grid

Grid is a two-dimensional layout system that organizes content in rows and columns, perfect for complex layouts like dashboards or gallery pages within a <main> or <section>.

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

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .grid-container div {
    padding: 10px;
    border: 1px solid #ccc;
  }
</style>
  

Preview:

Combining Semantic HTML with Flexbox and Grid

Using Flexbox or Grid with semantic elements like <header>, <nav>, and <main> creates modern, accessible layouts. This example shows a full page layout.

<header>
  <h1>My Website</h1>
</header>
<nav>
  <ul class="nav-links">
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
<main>
  <section class="grid-content">
    <article>Post 1</article>
    <article>Post 2</article>
    <article>Post 3</article>
  </section>
</main>
<footer>
  <p>© 2025 My Website</p>
</footer>

<style>
  .nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
  }
  .grid-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .grid-content article {
    padding: 10px;
    border: 1px solid #ccc;
  }
  header, footer {
    padding: 10px;
    text-align: center;
  }
</style>
  

Preview:

Best Practices for CSS Layout Techniques

• Use Flexbox for one-dimensional layouts and Grid for two-dimensional layouts.
• Combine with semantic elements like <main> or <section> for better SEO.
• Use responsive units like fr or vw for adaptability.
• Test layouts on different screen sizes to ensure responsiveness.
• Keep CSS minimal to optimize performance.

Common Mistakes to Avoid

• Using Flexbox for complex grid-like layouts, which Grid handles better.
• Ignoring semantic HTML, reducing SEO and accessibility.
• Not testing layouts on mobile devices, leading to poor responsiveness.

Try It Yourself

Create a responsive layout using Flexbox for a navigation bar and Grid for a content section within a <main>.

<header>
  <h1>My Page</h1>
</header>
<nav>
  <ul class="try-nav">
    <li><a href="#home">Home</a></li>
    <li><a href="#services">Services</a></li>
  </ul>
</nav>
<main>
  <section class="try-grid">
    <div>Card 1</div>
    <div>Card 2</div>
  </section>
</main>

<style>
  .try-nav {
    display: flex;
    list-style: none;
    gap: 15px;
    justify-content: center;
  }
  .try-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .try-grid div {
    padding: 10px;
    border: 1px solid #ccc;
  }
  header {
    padding: 10px;
    text-align: center;
  }
</style>
  

Preview:

Mastering Flexbox and Grid with semantic HTML allows you to create responsive, accessible layouts. Practice these techniques to build modern websites!