From a Stack to a Structure

Your portfolio pages now have content and consistent styling. In this section, you'll give them structure - organizing sections side by side or top to bottom so that your layout feels balanced on desktop and still readable on smaller screens.

Modern CSS offers two main tools for this: Flexbox (for one-dimensional layouts like navigation bars or rows of content) and Grid (for two-dimensional page layouts).

Flexboxes are one-dimensional, meaning they span across a row or down a column. Which axis, or direction, you use is specified using flex-direction, and they also have powerful properties for exact alignment. Flexboxes are great for navigation bars, or aligning form elements. Because they "flex", they can grow or shrink depending on the size of the content within them.

A Grid is two-dimensional allowing you to create aligned rows and columns. Whereas Flexbox is "content-first" (flexing to the content), Grid is "layout-first". This is important when things have to be placed and fit in specifically defined places or "cells". When the page design gets complex, when elements need specific and consistent alignment, and when intentional overlap of elements is needed, Grid is the way to go.

Let's dive back into our portfolio project to create and customize fixed and fluid layout behavior, implement basic responsive design, and use flexbox and grid to give your portfolio the exact layout you are looking for. As with any project, measure twice and cut once, so let's start with Step 1 and plan ahead:

Step 1: Plan Your Layout

Each page should have these main sections:

  • Header: name and tagline
  • Navigation bar: links to Home, About, Contact
  • Main content area: text, images, and featured sections
  • Footer: copyright line

You'll use Flexbox for the header and navigation bar, and Grid for the main content area.

Pro tip: First try creating a sketch on paper of your site's desired layout and use that as a guide in creating the digital version.

Step 2: Add a Flexbox Navigation Bar

Open your assets/css/style.css file and add this near the top.

/* Flexbox layout for navigation */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1d3557;
  color: white;
  padding: 1rem;
}

nav a {
  color: white;
  margin-left: 1rem;
}

nav a:hover {
  text-decoration: underline;
}

What this does:

  • display: flex makes the header a flex container.
  • justify-content: space-between spreads the logo and links apart.
  • align-items: center keeps everything vertically aligned.

Open your index.html and make sure your header looks like this:

<header>
  <h1>Your Name</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="about.html">About</a>
    <a href="contact.html">Contact</a>
  </nav>
</header>

TIP: Remember that changes committed to github may take a few minutes to update. If you want to experiment first and see immediate results, always use the MDN Playground first, then make the real changes to your project.

Step 3: Use Grid for Your Main Content

Now let's organize your main content sections. Add this to your CSS file replacing what you had from 3.3:

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 2rem auto;
}

What this does:

  • display: grid activates Grid layout.
  • grid-template-columns: 1fr 1fr divides the main content into two equal columns.
  • gap controls the space between columns.

Try adding this to your index.html:

<main>
  <section>
    <h2>About Me</h2>
    <p>A few sentences about who you are and what inspires you.</p>
  </section>

  <section>
    <h2>Recent Work</h2>
    <p>Highlight a project or experience you're proud of.</p>
  </section>
</main>

Step 4: Make It Responsive

To keep things readable on smaller screens, use a media query to switch back to a single-column layout.

@media (max-width: 600px) {
  main {
    grid-template-columns: 1fr;
  }
}

Now your portfolio layout automatically adjusts for phones and tablets.

Step 5: Practice and Experiment

  • Add display: flex to your footer and use justify-content: center.
  • Try changing grid-template-columns to 2fr 1fr and see how it changes spacing.
  • Add a background color to each section to visualize your layout zones.


Reflection

  • How did Flexbox help you align your header content?
  • How did Grid simplify the layout of your main sections?
  • What did you notice when resizing your browser window?


Summary

You just gave your portfolio a real layout! Using Flexbox for alignment and Grid for structure, you've built a design that adapts to different screen sizes without breaking. In the next unit, you'll learn how to make that design accessible to all users - ensuring your site looks good and works well for everyone.

Source: Khalil Abdullah and Saylor University
Creative Commons License This work is licensed under a Creative Commons Attribution 4.0 License.