intro-frontend-course

Lesson: CSS Positioning, Grid System, and Layout

Introduction

Understanding CSS positioning and layout is crucial for creating well-structured and visually appealing web pages. This lesson covers different positioning techniques, traditional grid systems using regular CSS, and layout models.

CSS Positioning

CSS positioning allows you to control the placement of elements on a web page. The different positioning techniques include static, relative, absolute, fixed, and sticky positioning.

Static Positioning

• Default Positioning: Every element on a webpage is positioned statically by default.
• Normal Document Flow: Elements are positioned according to the natural flow of the document.

Example:

.static {
  position: static; /* This is the default value */
}

HTML:

<div class="static">This is a statically positioned element.</div>

See the Pen Untitled by Mik M (@Mik-M) on CodePen.

Relative Positioning

• Relative to Itself: Elements are positioned relative to their original position.
• Offsets: Use top, right, bottom, and left to move the element.

Example:

.relative {
  position: relative;
  top: 20px; /* Moves down by 20px from its original position */
  left: 20px; /* Moves right by 20px from its original position */
}

HTML:

<div class="relative">This is a relatively positioned element.</div>

See the Pen Week_3__relative_position_example by Mik M (@Mik-M) on CodePen.

Absolute Positioning

• Relative to Nearest Positioned Ancestor: Elements are positioned relative to the nearest ancestor that has a position other than static.
• Removed from Normal Flow: Does not affect the position of other elements.

Example:

.absolute {
  position: absolute;
  top: 50px;
  left: 50px;
}

HTML:

<div class="relative-container">
  <div class="absolute">This is an absolutely positioned element.</div>
</div>

See the Pen Week_3__absolute_position_example by Mik M (@Mik-M) on CodePen.

Fixed Positioning

• Relative to Viewport: Elements are positioned relative to the viewport and stay fixed when the page is scrolled.
• Removed from Normal Flow: Does not affect the position of other elements.

Example:

.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: white;
}

HTML:

<div class="fixed">This is a fixed positioned element.</div>

See the Pen week_3__fixed_position_example by Mik M (@Mik-M) on CodePen.

Sticky Positioning

• Toggle Between Relative and Fixed: Elements switch between relative and fixed positioning based on scroll position.
• Useful for Sticky Headers: Perfect for elements that need to stick at the top or bottom of the viewport.

Example:

.sticky {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0;
  background-color: yellow;
}

HTML:

<div class="sticky">This is a sticky positioned element.</div>

See the Pen Week_3__sticky_position_example by Mik M (@Mik-M) on CodePen.

Grid System

A grid system divides the page into a series of rows and columns to create a consistent layout. This system helps in organizing content and making it responsive.

Basic Grid Structure

• Container: Wraps the entire grid.
• Row: Defines a horizontal group of columns.
• Column: Individual units within a row.

Why Use a Grid System?

A grid system provides a solid foundation for building a responsive layout. It ensures that your content is well-organized and adaptable to different screen sizes.

Creating a Grid Layout with Regular CSS

Example: Three-Column Layout

Step-by-Step Instructions:

1. HTML Structure

HTML:

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
    <div class="column">Column 3</div>
  </div>
</div>

1. CSS Styles

CSS:

.container {
  width: 100%;
  margin: 0 auto;
}

.row {
  display: flex;
}

.column {
  width: 33.33%;
  padding: 10px;
}

See the Pen Week_3__three_column_layout_example by Mik M (@Mik-M) on CodePen.

Example: Two-Column Layout with Header and Footer

Step-by-Step Instructions:

1. HTML Structure

HTML:

<div class="container">
  <header class="header">Header</header>
  <div class="row">
    <div class="column">Main Content</div>
    <div class="column">Sidebar</div>
  </div>
  <footer class="footer">Footer</footer>
</div>

1. CSS Styles

CSS:

.container {
  width: 100%;
  margin: 0 auto;
}

.header, .footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

.row {
  display: flex;
}

.column {
  width: 50%;
  padding: 10px;
}

See the Pen Week_3__two_column_layout_example by Mik M (@Mik-M) on CodePen.

Video: Learn CSS Position In 9 Minutes

Float and Clear

• Float: Elements float to the left or right, allowing other elements to wrap around them.
• Clear: Used to control the behavior of elements after a floated element.

Example:

.float-left {
  float: left;
  width: 50%;
}

.clear {
  clear: both;
}

HTML:

<div class="float-left">This is a floated element.</div>
<div class="float-left">This is another floated element.</div>
<div class="clear">This element clears the floats above.</div>

See the Pen Week_3__float_example by Mik M (@Mik-M) on CodePen.

Video: CSS Grid tutorial

Flexbox

Flexbox is a powerful layout model for creating flexible and responsive layouts.

Flex Container Properties

• display: flex;
• flex-direction
• justify-content
• align-items

Example:

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flex Item Properties

• flex
• align-self

Example:

.flex-item {
  flex: 1;
}

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

See the Pen Week_3__flexbox_example by Mik M (@Mik-M) on CodePen.

Grid Layout

CSS Grid Layout is a versatile two-dimensional layout system that allows you to define rows and columns, offering control over the placement and sizing of elements within a web page.

Grid Container Properties

• display: grid;: Establishes a grid container.
• grid-template-columns: Defines the number and sizes of the columns in the grid.
• grid-template-rows: Defines the number and sizes of the rows in the grid.
• gap: Sets the spacing between grid rows and columns.

Example:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 10px; /* 10px gap between columns and rows */
}

Grid Item Properties

• grid-column: Controls a grid item’s placement and span across grid columns.
• grid-row: Controls a grid item’s placement and span across grid rows.

Example:

.grid-item {
  grid-column: 1 / 3; /* Spans from the start of the first column to the end of the second column */
}

HTML Structure:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

See the Pen Week_3__grid by Mik M (@Mik-M) on CodePen.

Horizontal Gap Example:

To demonstrate the effect of a horizontal gap between items that do not span multiple columns:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Two columns */
  gap: 10px; /* 10px gap both horizontally and vertically */
}
.grid-item {
  /* No spanning specified, each item fits in its grid column */
}

HTML:

<div class="grid-container">
  <div class="grid-item">Item 1</div> <!-- First column, first row -->
  <div class="grid-item">Item 2</div> <!-- Second column, first row -->
  <div class="grid-item">Item 3</div> <!-- First column, second row -->
  <div class="grid-item">Item 4</div> <!-- Second column, second row -->
</div>

See the Pen Week_3__grid_horizontal by Mik M (@Mik-M) on CodePen.

This expanded example shows how the gap property can influence both the vertical and horizontal spacing between items, providing a clearer visualization of grid behavior.

Practical Example: Blog Layout

Step-by-Step Instructions:

1. HTML Structure

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="fixed">
    <h1>My Blog</h1>
  </header>
  <nav class="sticky">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>


    </ul>
  </nav>
  <main>
    <section class="grid-container">
      <article class="grid-item">Article 1</article>
      <article class="grid-item">Article 2</article>
      <article class="grid-item">Article 3</article>
      <article class="grid-item">Article 4</article>
    </section>
  </main>
  <footer>
    <p>&copy; 2024 My Blog</p>
  </footer>
</body>
</html>

1. CSS Styles

CSS:

/* Global Styles */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header, nav, main, footer {
  padding: 20px;
}

header {
  background-color: #333;
  color: white;
  position: fixed;
  width: 100%;
  top: 0;
}

nav {
  background-color: #f4f4f4;
  margin-top: 60px;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin-right: 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

main {
  margin-top: 20px;
  padding-top: 80px; /* Ensure main content is not hidden behind fixed header */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px;
}

See the Pen Week_3__blog_layout_example by Mik M (@Mik-M) on CodePen.

Common Pitfalls and Tips

• Common Mistake: Using absolute positioning without a positioned ancestor.
  • Tip: Always check the positioning context.
• Common Mistake: Overlapping fixed elements.
  • Tip: Use z-index to control stacking order.

Summary and Recap

• Static Positioning: Default behavior, follows document flow.
• Relative Positioning: Positioned relative to itself.
• Absolute Positioning: Positioned relative to nearest positioned ancestor.
• Fixed Positioning: Positioned relative to the viewport.
• Sticky Positioning: Switches between relative and fixed based on scroll.
• Grid System: Organizes content using rows and columns.
• Flexbox and Grid Layout: Modern layout systems for flexible and responsive designs.

Exercise

1. Create a webpage with a header, main content area, and footer using different positioning techniques.
2. Use Flexbox to create a responsive navigation bar.
3. Use Grid Layout to create a photo gallery.

Quizzes

• Quiz 1: What does the position: absolute; property do?
• Quiz 2: How do you clear floated elements?

Additional Resources

• MDN Web Docs on CSS Positioning
• CSS-Tricks Guide to Flexbox
• MDN Web Docs on CSS Grid