Day 10: Advanced CSS Layouts

Welcome to Day 10! Today, we’ll explore flexbox and grid—two powerful CSS layout systems that allow you to create complex, responsive layouts with ease. Understanding these tools will give you control over the layout of your web pages, especially for different screen sizes.

But before we begin, I want you to understand the concept of parent-children tags. When you nest tags like in the case of a <ul> which has its <li> tags as children.

<ul> <!-- parent tag -->
    <li>First child</li>
    <li>Second child</li>
</ul>

This concept is used by the css flexbox and grid. The parent(the container) tag is displayed as either flex or grid; Then, the children tags are distributed inside to create a layout we want.

Introduction to Flexbox

The flexbox layout system is designed to make it easier to align and distribute items within a container. It’s perfect for building one-dimensional layouts, either in rows or columns.

Key Concepts of Flexbox:

- Flex Container: The parent element that holds flex items. You enable flexbox on this container by setting display: flex;.

- Flex Items: The child elements within the flex container that you want to control.

Flexbox Properties

justify-content

Controls the alignment of items along the main axis (horizontal by default). Common values are:

• flex-start: Align items to the start of the container.
• center: Center items in the container.
• space-between: Distribute items with equal space between them.

align-items

Aligns items along the cross axis (vertical by default). Common values are:

• stretch: Stretches items to fill the container.
• center: Centers items vertically.

flex-direction

Determines the direction of the main axis:

• row: Horizontal layout (default).
• column: Vertical layout.

Example: Creating a Simple Flexbox Layout

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
</div>

<style>
  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 10px;
  }
</style>

Part 2: Introduction to Grid

The grid layout system is a two-dimensional system that gives you control over both rows and columns. It’s ideal for building more complex, multi-dimensional layouts like web pages with multiple sections.

Key Concepts of Grid

• Grid Container: The parent element where the grid layout is applied. You set this up by using display: grid;.
• Grid Items: The child elements within the grid container that you want to arrange.

Grid Properties

• grid-template-columns / grid-template-rows: Define the number and size of the columns and rows. You can use fixed values (e.g., 200px) or relative units like fr (fraction of available space).

  Example: grid-template-columns: 1fr 2fr; creates two columns, with the second column being twice as wide as the first.

• grid-gap: Defines the space between rows and columns.

• grid-area: Allows you to position elements within specific grid cells.

Example: Creating a Grid Layout

<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="main-content">Main Content</div>
  <div class="footer">Footer</div>
</div>

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
  }
  .header {
    grid-column: 1 / -1;
    background-color: lightcoral;
  }
  .sidebar {
    background-color: lightgreen;
  }
  .main-content {
    background-color: lightblue;
  }
  .footer {
    grid-column: 1 / -1;
    background-color: lightgrey;
  }
</style>

This example creates a simple layout with a header, sidebar, main content, and footer. The header and footer span both columns, while the sidebar and main content are arranged side by side.

Part 3: Combining Flexbox and Grid

In modern web design, flexbox and grid are often used together. Grid is great for defining the overall layout, while flexbox is ideal for aligning content within grid items. You might use grid to define the layout of a webpage, then use flexbox inside individual sections for more precise control of content alignment.

Part 4: Making Layouts Responsive

Both flexbox and grid support media queries, which allow you to adjust the layout based on screen size. For example, you can change the grid structure on smaller screens to ensure the content stacks vertically instead of horizontally.

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

This media query will change the grid layout to a single-column structure on screens smaller than 768px, making it more mobile-friendly.

Assignment 10

Objective

Create a fully responsive webpage that uses both flexbox and grid to structure its layout. The goal is to apply the concepts from the lesson to design a clean, multi-section layout that adapts to different screen sizes.

Instructions

HTML Structure

Create a simple webpage with the following sections:

• A header with a navigation bar.
• A main content area with two sections:
  • A sidebar for additional links or information.
  • A main article section for content.
• A footer with contact information and social links.

CSS Layout

• Use grid for the overall layout of the webpage:

  • The header should span the full width of the page.
  • The main content should have a sidebar and main article section side by side on larger screens.
  • The footer should also span the full width of the page.

• Use flexbox inside each section:

  • For example, use flexbox to align items in the navigation bar horizontally.
  • Use flexbox to center content vertically in the footer.

Responsive Design

• Use media queries to make the page responsive:
  • On screens smaller than 768px, change the grid layout so that the sidebar and main article stack vertically, with the sidebar appearing first.
  • Ensure the navigation bar collapses into a vertical menu on smaller screens.
  • Make sure the layout remains user-friendly on both desktop and mobile.

Style Enhancements

• Add custom styling (background colors, padding, margins) to make the layout visually appealing.
• Include hover effects on the navigation links and buttons.

Deliverables

• Submit your HTML and CSS files.
• The webpage should be responsive and demonstrate your ability to use both flexbox and grid for layout design.

This assignment will challenge you to combine flexbox and grid for a practical layout while ensuring the webpage is mobile-friendly and well-structured.