Site Designer Guide
tutorial css-grid portfolio intermediate

Building a one-page portfolio with CSS Grid

This tutorial builds a single-page portfolio from scratch using CSS Grid for layout. You’ll create an asymmetric hero, a project grid, an about section, and a contact footer — all without a CSS framework.

What you’ll build: A frameworkless single-page portfolio with a CSS Grid project gallery.

Time to complete: ~60 minutes.

Prerequisites: Familiarity with the canvas, basic understanding of CSS classes.

Step 1: Create a blank project

  1. New project, no framework

    File → New Project → select Frameworkless. Name it “Portfolio.”

  2. Set global body styles

    Click the <body> element in the Outline pane. In Design → Style, set: font-family to your chosen font (add via Resources → Fonts), margin: 0, background-color to your base color, color to your text color.

Step 2: Build the hero

  1. Insert a Section element

    Right-click the canvas → Insert → Section. Name the class .hero.

  2. Set up the Grid

    Select the hero section. In Design → Style, set display: grid, grid-template-columns: 1fr 1fr, min-height: 100vh, align-items: center.

  3. Add text column

    Right-click inside the section → Insert → Container. Add a heading (h1) and a paragraph inside it. Style the heading: font-size: clamp(2.5rem, 6vw, 5rem), line-height: 1.1.

  4. Add image column

    Insert another Container sibling. Insert an Image element inside it. Upload your portrait or a key work image. Set width: 100%, aspect-ratio: 4/5, object-fit: cover.

  1. Insert a projects Section

    Right-click → Insert → Section. Class: .projects. Set padding: 5rem 2rem.

  2. Add a section heading

    Insert a heading (h2) inside. Text: “Selected work.” Style: font-size: clamp(1.5rem, 3vw, 2.5rem), margin-bottom: 3rem.

  3. Create the Grid

    Insert a Container inside the section. Class: .project-grid. Set display: grid, grid-template-columns: repeat(3, 1fr), gap: 1.5rem.

  4. Add project cards

    Inside .project-grid, insert a Container for each project. Class: .project-card. Set position: relative, overflow: hidden, aspect-ratio: 4/3. Add a background image for the project thumbnail. Add a child Container with the project title (.project-title) absolutely positioned at the bottom with background: rgba(0,0,0,0.7), color: white, padding: 1rem, opacity: 0, transition: opacity 0.3s ease.

  5. Add hover effect

    In the Effects pane for .project-title, switch to :hover state and set opacity: 1. The title fades in on hover.

  6. Duplicate for all projects

    Select the first .project-card, press ⌘D to duplicate. Repeat for each project (aim for 6 cards — fills a 3×2 grid nicely). Update each card’s background image and title.

Step 4: About section

  1. Insert a Section. Class: .about

    Set display: grid, grid-template-columns: 1fr 1fr, gap: 4rem, padding: 5rem 2rem, background-color to a slightly different tint.

  2. Add biography text

    Left column: h2 “About me” + two paragraphs of bio text. Right column: your photo with border-radius: 1rem.

  1. Insert a footer Section. Class: .contact

    Center-aligned. Set text-align: center, padding: 5rem 2rem.

  2. Add email CTA

    Add an h2 “Let’s work together” + an anchor tag styled as a button linking to mailto:your@email.com.

  3. Add social links

    Insert a flex container with icon links (use SVG icons from Resources) for LinkedIn, GitHub, Dribbble, etc.

Step 6: Make it responsive

  1. Test at tablet width

    Drag the width slider to 768px. Identify what breaks (usually the 3-column grid becomes too cramped).

  2. Adjust at 768px breakpoint

    Enter breakpoint mode at 768px. Set .project-grid grid-template-columns: repeat(2, 1fr). Set .hero and .about to grid-template-columns: 1fr (stack vertically).

  3. Adjust at 480px

    Enter breakpoint mode at 480px. Set .project-grid to grid-template-columns: 1fr. Reduce padding to 2rem 1rem.