Students change the relationships between existing content boxes by arranging selected homepage sections into rows and columns. Building on the spacing work from Lesson 6, they use Flex and Grid to control how parent containers arrange the child elements inside them.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 7 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Web Coding
  • Project milestone: Convert selected stacked content groups into multi-column layouts

Learning Objectives

By the end of the lesson, students should be able to:

  • Explain how parent containers can control the arrangement of their direct children.
  • Identify the parent and child elements involved in a layout.
  • Describe the basic difference between Flex and Grid.
  • Apply a simple multi-column layout to existing homepage content.

Key Concepts and Vocabulary

  • Layout
  • Parent
  • Child
  • Container
  • Flex
  • Grid
  • Row
  • Column
  • Gap
  • Alignment

Materials and Resources

  • The student website from Lessons 1 through 6
  • A text editor and web browser
  • The three-item box group created in Lessons 3 and 4 and refined in Lessons 5 and 6
  • An existing image-and-text section from the homepage
  • Several current websites selected by the instructor with clear card rows, split sections, or other multi-column layouts
  • Flex and Grid

Prior Knowledge

Students should understand basic HTML nesting, CSS classes, the box model, and how spacing affects individual content boxes. Their homepage should already have stable content, visual styling, and spacing so this lesson can focus on layout rather than redesign.

Opening Activity

Look at several websites and identify places where content is arranged horizontally instead of only being stacked vertically. Ask students why a designer might place three related items in one row or an image beside text.

Connect the examples to the Web Coding idea that HTML creates the structure of a page and CSS controls how that structure is presented. The content already exists. In this lesson, students change the relationships between those existing boxes by changing CSS on their parent containers.

Direct Instruction

Return to the idea that web pages are made from boxes inside other boxes. Layout often works by applying a rule to a parent container, which then changes how its direct children are arranged.

  • Flex arranges items mainly in one direction, such as a row or a column, and provides tools for spacing and alignment.
  • Grid creates an explicit row-and-column structure and is useful when several items need to share defined columns.
  • The element using display: flex or display: grid is the container. Its direct children become the items being arranged.
  • gap creates consistent space between Flex or Grid items without adding outside space around the entire container.
  • The same HTML can remain unchanged while CSS transforms a vertical stack into a multi-column layout.

Demonstrate the same simple set of boxes first with Flex and then with Grid. Keep the comparison narrow: Flex is usually the simpler choice when items mainly need to line up in one direction, while Grid is useful when the design needs defined columns.

Students do not need to master every Flex or Grid property in one class. The practical goal is to recognize the container-and-items relationship and use one appropriate layout pattern in their own project.

Recommended AI Coding Educator Lessons

The interactive demos and Code Sandbox are especially useful in this lesson. Students can switch a small example between stacked, Flex, and Grid layouts and see that the important change happens on the parent container before they edit their project.

Applied Project

Students reorganize content they have already built rather than creating new layout examples. To keep the work realistic for one class, the required project work focuses on the existing three-box group, with a second layout added only if time allows.

  1. Find the three repeated boxes created earlier in the course and identify the parent container that holds them.
  2. Add a class to the parent container if it does not already have one that can be used specifically for layout.
  3. Choose Flex or Grid for the three-box group and apply the layout rule to the parent.
  4. Arrange the three boxes into columns without changing the content inside them.
  5. Add gap to create consistent space between the columns.
  6. Save the files and compare the new layout with the previous stacked version.
  7. If time allows, identify the existing image-and-text section and use Flex or Grid to place the image beside the text.
  8. Review each change and keep the horizontal layout only if it makes the content easier to view, compare, or understand.

Do not add responsive rules yet. Students should understand the desktop layout first, even if the new columns do not work well on a narrow screen. Lesson 8 will address that problem directly with responsive design and breakpoints.

Check for Understanding

Students should be able to identify the parent element controlling a layout, identify its direct children, and explain why changing the parent’s CSS changes the arrangement of those children.

Useful questions include:

  • Which element is the layout container?
  • Which elements are its direct children?
  • Why did you choose Flex or Grid for this section?
  • What happens if you remove display: flex or display: grid from the parent?
  • What does gap change?
  • Why did the HTML content not need to change when the layout changed?

Differentiation and Extensions

Support: Provide the parent selector and a basic Flex or Grid rule for the three-box group. Have students identify the affected children, add gap, and explain which element is controlling the layout.

Extension: Have students rebuild the same three-box section once with Flex and once with Grid, then explain which approach is clearer for that particular layout.

If a layout behaves unexpectedly, the AI Tutor can help students identify whether the wrong element has the layout rule, whether the expected items are direct children, or whether a Flex or Grid property is being misunderstood. Students should then make and test the correction in their own CSS.

Lesson Outcome

Students finish the lesson with the three-box group arranged into an intentional multi-column layout and, where time allows, a second horizontal image-and-text layout. They should understand that the parent container controls the arrangement of its child elements.

Closure

Review the idea that layout changes relationships between existing boxes rather than requiring the page content to be rebuilt. Preview that Lesson 8 will introduce responsive design and breakpoints so these new multi-column layouts can adapt when the screen becomes too narrow.

Teacher Reflection

  • Could students reliably identify the layout container and its direct children?
  • Could students explain the basic difference between Flex and Grid without needing to memorize every property?
  • Did students use a multi-column layout because it improved the content relationship rather than simply because columns were required?
  • Do any students need additional support with the parent-and-child relationship before adding responsive behavior in Lesson 8?