Okay, you've successfully tackled the layout and styling for your homepage (`index.html`). You created a responsive grid for featured recipes using CSS Grid and meticulously styled the individual recipe cards (`.recipe-card`) along with the introductory text. This provides a great foundation. Now, let's shift our focus to the **Category Page** (e.g., `pages/category.html`). The primary purpose of this page is to display a list or gallery of all recipes belonging to a specific category (like "Appetizers" or "Desserts"). Similar to the homepage's featured section, the `

` area of the category page needs a defined layout to present these recipes effectively. ### Choosing a Layout: Consistency with Grid Since the category page will also display multiple recipe previews, likely using the same `

` structure you styled for the homepage, it makes sense to reuse the layout pattern you've already established. **CSS Grid** worked excellently for the responsive, multi-column layout on the homepage, so let's apply it here as well for consistency and efficiency. This approach keeps the visual presentation of recipe collections uniform across different parts of your site. ### Anticipated HTML Structure We'll assume the `

` section of your `pages/category.html` template looks something like this: ```html

Category Name (e.g., Appetizers)

Mini Quiches

Flaky pastry filled with cheese and herbs.

View Recipe

Classic Bruschetta

Toasted bread topped with fresh tomatoes and basil.

View Recipe

``` Key points: * A main heading (`

` or maybe `

` depending on your overall structure) indicates the category name. * A container element (like `
`) wraps all the recipe previews for this category. This will be our Grid Container. * Each recipe preview uses the same `
` structure and class as on the homepage. This is crucial for reusing the card styles you already wrote! ### Defining the Grid Layout for the Category List We'll apply CSS Grid rules to the `.category-recipe-list` container. Since we want a consistent look with the homepage's featured grid, we can reuse the exact same grid definition properties. 1. `display: grid;`: Turns the `.category-recipe-list` section into a grid container. 2. `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));`: The same powerful, responsive column definition used on the homepage. It creates as many columns as fit, each at least 300px wide, growing equally to fill available space. 3. `gap: var(--spacing-lg);`: The same gap definition used on the homepage, ensuring consistent spacing between recipe cards. ### Writing the CSS Rules Add the following CSS rules to your `style.css` file. Place them within the `/* === Page Specific Layouts === /` section, creating a dedicated subsection for the category page. ```css / css/style.css / / ... (Previous styles: Normalize, :root, body, typography, links, header, nav, footer) ... / / ================================================ / / === Page Specific Layouts === / / ================================================ / / --- Homepage Layout --- / / ... (.intro, .featured-recipes, .recipe-card styles from previous tasks) ... / / --- Category Page Layout --- / / Style the main heading on the category page / / Adjust selector if using h2 instead of h1 / main > h1 { / Targeting h1 directly inside main / / Optional: Center the category title / text-align: center; / Add space below the title before the recipe list / margin-bottom: var(--spacing-xl); / e.g., 2rem / } / Define grid layout for the recipe list section on the category page / .category-recipe-list { / 1. Establish this section as a Grid Container / display: grid; / 2. Define the columns (REUSING homepage grid definition for consistency) / / Creates a responsive multi-column layout / grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); / 3. Define the gap between grid items (recipe cards) / / REUSING homepage gap for consistency / gap: var(--spacing-lg); / e.g., 1.5rem / } / NOTE: The .recipe-card styles defined under Homepage Layout / / will AUTOMATICALLY apply to the cards within .category-recipe-list / / because they share the same class name! No need to repeat them. / / --- Recipe Page Layout --- / / (Styles for recipe page main content will go here later) / / ... (Rest of your CSS, e.g., Media Queries for Responsiveness later) ... / ``` ### Code Breakdown `main > h1 { ... }`: Targets the main heading (`
`) directly inside the `
` element (you might need to adjust this selector if your heading structure is different, e.g., `main .category-title` if you add a class). * `text-align: center;`: Centers the category title. * `margin-bottom: var(--spacing-xl);`: Adds space below the title. * `.category-recipe-list { ... }`: Targets the section containing the list of recipe cards for the category. * `display: grid;`: Makes it a grid container. * `grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));`: Defines the responsive columns identically to the homepage grid. * `gap: var(--spacing-lg);`: Defines the spacing between cards identically to the homepage grid. * Reusability Note: The comment explicitly reminds you that the `.recipe-card` styles are being reused, which is efficient and promotes consistency. ### What You Should See Now Save your `css/style.css` file. Now, open one of your category pages (e.g., `pages/category.html`, assuming you've populated it with some `
` elements) in your browser: 1. Category Title: The main title for the category should be displayed (and centered, if you included that style). 2. Grid Layout: The recipe cards listed on the page should be arranged in the exact same responsive grid as the featured recipes on the homepage. 3. Card Styling: Each recipe card should look identical to the cards on the homepage (white background, shadow, padding, image styling, button styling, etc.) because they share the `.recipe-card` class. 4. Responsiveness: Resizing the browser window should cause the grid columns on the category page to reflow automatically, just like on the homepage. You have now successfully defined a consistent and responsive layout for your category pages, efficiently reusing both the grid structure and the card styling from your homepage work. ### Next Steps The layout for the category page's recipe list is set up, and the cards are already styled thanks to class reuse. The next task is officially "Style the recipe preview elements on the Category page". While the core styling is done via `.recipe-card`, you might use this task to: 1. Verify: Double-check that the `.recipe-card` styles apply correctly and look good in the category page context. 2. Minor Adjustments (Optional): Consider if any very subtle tweaks are needed for cards specifically on the category page (though usually, consistency is preferred). For example, maybe a slightly different hover effect, though unlikely. In most cases, the reused styles will be sufficient, and you can move directly to the next page type's layout. After confirming the category page previews are styled as expected, you'll proceed to defining the layout for the final page type: the individual recipe page. *** ### Further Reading * CSS Grid Layout (Revisited): [MDN Web Docs - CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) * CSS Selectors (Child Combinator `>`): [MDN Web Docs - Child combinator](https://developer.mozilla.org/en-US/docs/Web/CSS/Child_combinator) (Understanding `main > h1`) * Code Reusability in CSS: [Smashing Magazine - Strategies For Keeping CSS Maintainable](https://www.smashingmagazine.com/2016/06/strategies-keeping-css-maintainable/) (Discusses principles like DRY - Don't Repeat Yourself) * Designing Category Pages: [Baymard Institute - Category Page Design](https://baymard.com/blog/category-page-design) (While focused on e-commerce, principles apply to organizing content)