Webbo3 Frontend Development · Month 1 · Lesson 13

CSS Grid Complete: Practical 2D Layout Mastery

CSS Grid Complete: a practical Webbo3 Academy lesson with live interactive examples, a full exercise, and real running code you can test yourself.

You currently know how to build simple web pages with HTML and CSS, and you have learned about Flexbox, which helps you create one dimensional layouts. However, as your projects become more complex, you will need to create two dimensional layouts, with rows and columns, to properly arrange your content. You might have tried using Flexbox for this, but it is not the best tool for the job. By the end of this lesson, you will be able to build a two dimensional page layout with CSS Grid, which is specifically designed for this purpose.

We are moving past the theory and diving straight into practical application. You will learn how to define a grid container, create grid tracks, and place items within the grid. You will also learn how to use the different Grid properties to control the layout of your items, and how to make your layout responsive. Type along with every example, because the best way to learn layout is by doing it.

What you need before starting

Your code editor and the project folder from previous lessons. Work along in your own editor as you read. This lesson is written to be typed, not skimmed.

Interactive Grid Playground

Let us make this interactive. Click the buttons below to see how different CSS Grid properties change the layout in real time. Watch how the boxes rearrange when you change the columns, rows, or gap properties. This is the fastest way to build an intuition for two dimensional layouts.

/* CSS for the interactive grid */
.playground {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background: #e0f2f1;
  padding: 10px;
}

/* JavaScript to change properties on click */
function setColumns(value) {
  grid.style.gridTemplateColumns = value;
}

Grid Template Columns and Rows

When working with CSS Grid, you need to define the grid tracks using grid template columns and grid template rows. These properties are used to specify the number and size of the grid lines. The unit fr represents a fractional unit, which divides the available space into equal parts. Let us see this in action with a practical example.

/* Grid container with 3 equal columns */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
  grid-template-rows: 100px 150px; /* Two rows with fixed heights */
  gap: 15px; /* Space between grid items */
  background: #f0f0f0;
  padding: 20px;
}

/* Grid items automatically fill the cells */
.grid-item {
  background: #0a6e6e;
  color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 4px;
}

Placing Items with Grid Column and Grid Row

To place items within the grid, you can use the grid column and grid row properties. These properties are used to specify the grid cell where you want to place an item. For example, grid column 1 / 3 will place an item in the first column and span it across two columns. Let us see this in a practical example.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

/* Item 1: spans column 1 to 2, row 1 to 2 */
.item1 {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  background: #0a6e6e;
}

/* Item 2: spans columns 2 to 4, rows 1 to 3 (large box) */
.item2 {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
  background: #c98a3e;
}

Repeat, Auto-Fit and Auto-Fill for Responsive Grids

The repeat function in CSS Grid is used to repeat a pattern of grid tracks. Auto fit and auto fill are two functions that can be used with repeat to create a dynamic grid layout that adapts to different screen sizes without needing media queries. This is one of the most powerful features of CSS Grid.

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* Creates as many 200px columns as possible, then expands them */
  gap: 20px;
}

.card {
  background: #e0f2f1;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

Named Areas with Grid Template Areas

Named areas are a way to define the layout of a grid container using a more readable and maintainable syntax. Instead of using numbers and lines to define the grid, you can use named areas to define the layout visually. This is incredibly useful for creating complex page layouts like dashboards or magazine designs.

.page-layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 200px 1fr 1fr;
  grid-template-rows: 80px 1fr 60px;
  gap: 10px;
  height: 500px;
}

.header { grid-area: header; background: #0a2540; }
.sidebar { grid-area: sidebar; background: #0a6e6e; }
.main { grid-area: main; background: #e0f2f1; }
.footer { grid-area: footer; background: #0a2540; }

Full Practical Exercise

Now it is your turn. Build a complete page layout featuring a header, sidebar, main content area with a responsive card grid, and a footer. Here is the full code. Study it, type it, and run it.

/* Complete CSS for the exercise */
body { 
  font-family: sans-serif; 
  margin: 0; 
  padding: 0; 
  background: #f4f4f4;
}

/* Main page layout using named grid areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 80px 1fr 60px;
  min-height: 100vh;
  gap: 0;
}

/* Header styling */
.header {
  grid-area: header;
  background: #0a2540;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 30px;
  font-size: 24px;
  font-weight: bold;
}

/* Sidebar styling */
.sidebar {
  grid-area: sidebar;
  background: #0a6e6e;
  color: #fff;
  padding: 20px;
}

/* Main content area with responsive card grid */
.main {
  grid-area: main;
  padding: 30px;
  background: #fff;
}

/* Responsive card grid using auto-fit */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.card {
  background: #e0f2f1;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  border: 1px solid #ddd;
}

/* Footer styling */
.footer {
  grid-area: footer;
  background: #0a2540;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* HTML Structure */
<div class="page">
  <header class="header">My Website</header>
  <aside class="sidebar">
    <h3>Menu</h3>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  </aside>
  <main class="main">
    <h2>Welcome</h2>
    <div class="card-grid">
      <div class="card">Card 1</div>
      <div class="card">Card 2</div>
      <div class="card">Card 3</div>
      <div class="card">Card 4</div>
    </div>
  </main>
  <footer class="footer">© 2026 My Website</footer>
</div>

Common mistakes to avoid

• Forgetting to define grid columns and rows. This looks like a grid that does not resize or align properly. The fix is to add grid template columns and grid template rows properties to the grid container.
• Confusing grid areas with grid cells. This looks like misplaced or overlapping content. The fix is to use grid area property to define areas and grid column and grid row properties to place items in specific cells.
• Not using fr units for flexible grid tracks. This looks like grids that do not adapt well to different screen sizes. The fix is to use fr units to define grid tracks that can adapt to available space.
• Overriding grid styles with other layout properties. This looks like grids that do not behave as expected. The fix is to remove or adjust properties like float or position that override grid styles.

Questions students ask

• What is the difference between grid and flexbox? Grid is for two dimensional layouts, while flexbox is for one dimensional layouts, either rows or columns.
• How do I make my grid responsive? Use fr units, minmax function, and auto fit or auto fill to create a responsive grid that adapts to different screen sizes.
• Can I nest grids inside each other? Yes, you can create nested grids by applying display grid to a grid item, allowing you to create complex layouts with multiple levels of grid structure.

Next lesson: Responsive Design That Actually Works.

Webbo3 Frontend Development · Month 1 · Lesson 14

Responsive Design That Actually Works: Practical Mastery

Learn to create responsive websites that adapt to various screen sizes and devices effectively with live interactive examples and a full exercise.

You have built a few web pages now, and they look great on your own laptop or desktop monitor. But have you ever looked at them on a friend's phone, or a tablet? If so, you might have been disappointed to find that they do not look quite right. The text is too small, the images are too big, or the layout is all wrong. This is a common problem for beginners, and it is what we are going to tackle in this lesson. By the end of it, you will be able to build a web page that looks good on a range of different devices.

We are moving past the theory and diving straight into practical application. You will learn how to use CSS to make your web page responsive, so that it adapts to the screen size and resolution of the device it is being viewed on. You will learn how to make your text and images resize automatically, and how to create a layout that works well on different screen sizes. Type along with every example, because the best way to learn responsive design is by doing it.

What you need before starting

Your code editor and the project folder from previous lessons. Work along in your own editor as you read. This lesson is written to be typed, not skimmed.

Interactive Responsive Playground

Let us make this interactive. Resize the browser window or click the buttons below to see how different responsive techniques work in real time. Watch how the layout adapts as the viewport changes. This is the fastest way to understand responsive design principles.

/* CSS for the responsive playground */
.responsive-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Responsive grid that adapts to screen size */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

The Viewport Meta Tag

The viewport meta tag is essential for responsive design, as it controls the zooming and width of the webpage on different devices. Without it, your webpage may not display correctly on mobile devices. This single line of code is what makes responsive design possible on mobile devices.

<!-- Add this to the <head> of your HTML document -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* This tells the browser to: */
/* 1. Set the width to the device's screen width */
/* 2. Set the initial zoom level to 1.0 (no zoom) */

Relative Units: Rem, Em, and Percentages

Relative units are crucial for responsive design. Rem is relative to the root element font size, em is relative to the parent element font size, and percentages are relative to the parent element's dimensions. Using these units instead of pixels makes your layout flexible and adaptable to different screen sizes.

/* Set base font size on root element */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* Use rem for typography */
h1 {
  font-size: 2.5rem; /* 40px, scales with root */
}

p {
  font-size: 1rem; /* 16px, standard text size */
}

/* Use percentages for flexible widths */
.container {
  width: 90%; /* 90% of parent width */
  max-width: 1200px; /* But never wider than 1200px */
  margin: 0 auto; /* Center the container */
}

/* Use em for spacing inside components */
.button {
  padding: 0.75em 1.5em; /* Scales with button's font size */
  font-size: 1rem;
}

Responsive Images

To make images responsive, you can use the CSS rule max width 100 percent. This rule tells the browser to make the image as wide as its parent element, but no wider. This prevents images from overflowing their containers and breaking your layout on smaller screens.

/* Make all images responsive */
img {
  max-width: 100%; /* Never wider than parent */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove inline spacing */
}

/* For more control, use specific classes */
.responsive-img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Crop to fill container */
}

Media Queries and Breakpoints

Media queries are a way to apply different styles to your website based on certain conditions, like the width of the screen. This is useful for making your website look good on different devices. Instead of choosing breakpoints based on device names, choose them based on where your content starts to look bad.

/* Mobile first: base styles for small screens */
.nav {
  display: flex;
  flex-direction: column; /* Stack vertically on mobile */
  gap: 10px;
}

/* Tablet: 768px and up */
@media (min-width: 768px) {
  .nav {
    flex-direction: row; /* Horizontal on tablet */
    justify-content: center;
  }
}

/* Desktop: 1024px and up */
@media (min-width: 1024px) {
  .nav {
    justify-content: space-between; /* Spread out on desktop */
    padding: 0 50px;
  }
}

The Horizontal Scroll Bug

The horizontal scroll bug is a common issue in responsive design, where a webpage has a horizontal scrollbar even though the content should fit within the viewport. This usually happens when an element has a fixed width that exceeds the viewport width, or when padding and margins push elements outside the viewport.

/* WRONG: Fixed width causes horizontal scroll on mobile */
.wrong {
  width: 1200px; /* Too wide for mobile screens */
}

/* RIGHT: Flexible width with max-width */
.right {
  width: 100%; /* Flexible width */
  max-width: 1200px; /* But never wider than 1200px */
  margin: 0 auto; /* Center the element */
}

/* Also check for overflow issues */
body {
  overflow-x: hidden; /* Prevent horizontal scroll as backup */
}

Full Practical Exercise

Now it is your turn. Build a complete responsive webpage featuring a navigation bar, hero section, responsive card grid, and footer that adapts to different screen sizes. Here is the full code. Study it, type it, and run it.

/* Complete CSS for the responsive exercise */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  overflow-x: hidden;
}

/* Container for consistent width */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation - mobile first */
.nav {
  background: #0a2540;
  padding: 1rem;
}

.nav-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.logo {
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
}

.nav-links a {
  color: #fff;
  text-decoration: none;
  padding: 0.5rem;
  background: #0a6e6e;
  border-radius: 4px;
  text-align: center;
}

/* Hero section */
.hero {
  background: #0a6e6e;
  color: #fff;
  padding: 3rem 1rem;
  text-align: center;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Card grid - responsive */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 3rem 0;
}

.card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
}

/* Footer */
.footer {
  background: #0a2540;
  color: #fff;
  padding: 2rem 1rem;
  text-align: center;
}

/* Tablet breakpoint: 768px */
@media (min-width: 768px) {
  .nav-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .nav-links {
    flex-direction: row;
  }
  
  .hero h1 {
    font-size: 3rem;
  }
}

/* Desktop breakpoint: 1024px */
@media (min-width: 1024px) {
  .hero {
    padding: 5rem 1rem;
  }
  
  .hero h1 {
    font-size: 4rem;
  }
}

Common mistakes to avoid

• Using only one breakpoint. This looks like a design that works perfectly on one device but breaks on all others. The fix is to test on multiple devices and add more breakpoints as needed.
• Setting fixed widths. This looks like a design that does not adapt to different screen sizes. The fix is to use relative units like percentages or ems instead of fixed units like pixels.
• Not considering orientation. This looks like a design that breaks when a device is rotated. The fix is to test both portrait and landscape modes.
• Overusing media queries. This looks like a bloated CSS file with many unnecessary rules. The fix is to use a mobile first approach and focus on the most common screen sizes.
• Forgetting the viewport meta tag. This causes mobile browsers to render your page as a desktop site. The fix is to always include the viewport meta tag in your HTML head.

Questions students ask

• What is the best way to get started with responsive design? Start by designing for small screens and working your way up to larger ones, using the mobile first approach to ensure your site is usable on all devices.
• How do I know which breakpoints to use? Use common screen sizes like 480px, 768px, and 1024px as a starting point, and adjust as needed based on your site's content and layout.
• Can I use a framework to make responsive design easier? Yes, frameworks like Bootstrap can simplify the process, but be sure to understand the underlying principles of responsive design to avoid relying too heavily on the framework.
• Why is my page still not responsive even with media queries? Check that you have included the viewport meta tag, are using relative units instead of fixed pixels, and have tested on actual devices or browser dev tools.

Next lesson: Transitions, Animations and Pseudo-classes.