Week 11: CSS Grid and CSS Flexbox

INFO 253A: Front-end Web Architecture

Kay Ashaolu

CSS Flexbox and CSS Grid: An Overview

  • Introduction to modern CSS layout systems
  • Focus on Flexbox and CSS Grid
  • Understanding layout paradigms beyond floats and inline-block

What is Flexbox?

  • Flexbox is a CSS layout model
  • Designed for one-dimensional layouts
  • Makes it easy to align and distribute space among items
  • Main components:
    • Flex container
    • Flex items

Creating a Flex Container

<div id="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
  • Use CSS to declare as a flex container:
    #container {
  display: flex;
}

Flex Direction Property

  • Controls the direction of the main axis
  • Options:
    • row (default)
    • row-reverse
    • column
    • column-reverse

Example:

#container {
  display: flex;
  flex-direction: column;
}

Justifying Content with Flexbox

  • Align items along the main axis using justify-content
  • Possible values:
    • flex-start (default)
    • flex-end
    • center
    • space-between
    • space-around
    • space-evenly
#container {
  justify-content: center;
}

Basic Flex Item Sizing: flex Property

  • flex is a shorthand property for flex-grow, flex-shrink, and flex-basis
  • Example:
 .item {
   flex: 1;
 }
  • Evenly distributes space among items

Flex Item Alignment Properties

  • Align items along the cross axis using align-items (for containers)
    • stretch (default)
    • flex-start
    • flex-end
    • center
    • baseline

Example:

#container {
  align-items: center;
}

Flexbox Wrapping with flex-wrap

  • Allows items to wrap onto new lines
  • Values:
    • nowrap (default)
    • wrap
    • wrap-reverse

Example:

#container {
  display: flex;
  flex-wrap: wrap;
}

Combining Flexbox Properties: flex-flow

  • Shorthand for flex-direction and flex-wrap
  • Example:
 #container {
   flex-flow: row wrap;
 }

Aligning Multiple Lines: align-content

  • Controls alignment of items on the cross-axis when there are multiple lines
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
    • stretch

Example:

#container {
  align-content: space-around;
}

Changing Item Order

  • Use order property to control item order
  • Example:
 .item {
   order: 2;
 }
  • Allows changing visual order without modifying markup

Aligning Single Items with align-self

  • Allows overriding align-items for individual items
  • Values: same as align-items
  • Example:
 .item {
   align-self: flex-end;
 }

Practical Flexbox Example

<div id="container">
  <div class="item">Sidebar</div>
  <div class="item">Main Content</div>
</div>

<style>
  #container {
    display: flex;
  }
  .item:first-child {
    flex: 1;
  }
  .item:last-child {
    flex: 2;
  }
</style>
  • Demonstrates a sidebar and main content layout

Common Use Cases for Flexbox

  • Navigation bars
  • Form alignment
  • Layout for media cards
  • Image galleries

Tips for Using Flexbox Effectively

  • Understand main vs. cross axes
  • Experiment with justify-content and align-items
  • Use flex properties for responsive design

Summary and Further Learning

  • Practice is key
  • Explore Flexbox with CSS Grid for complex layouts
  • Resources for further exploration: 

This presentation covers key concepts, includes practical examples, and maintains a focus on understanding web architecture through Flexbox principles. The slides are designed for students with varying levels of experience and provide ample room for expansion by the lecturer. Let me know if you need adjustments or further topics!

CSS Grid

Introduction to CSS Grid

  • CSS Grid Layout is a two-dimensional layout system for the web.
  • Simplifies the creation of complex and responsive layouts.
  • Eliminates the need for floats and positioning hacks.
  • Goal: Provide a more efficient way to create grid-based user interfaces.

Understanding CSS Grid

  • Grid Container: The parent element with display: grid;.
  • Grid Items: Direct children of the grid container.
  • Grid Lines: Dividing lines that create the grid structure.
  • Grid Cells: Individual rectangles formed by grid lines.
  • Grid Tracks: Rows or columns (space between two grid lines).

Setting Up a Grid Container

  • Apply display: grid; to a container element.
<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <!-- More grid items -->
</div>

.grid-container {
  display: grid;
}
  • All direct children become grid items.
  • No immediate visual change until grid properties are applied.

Defining Grid Columns

  • Use grid-template-columns to specify column sizes.
.grid-container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}
  • Creates three columns:
    • First: 100px wide
    • Second: 200px wide
    • Third: 100px wide
  • Mix different units (px, %, fr).

Using the Fraction Unit (fr)

  • fr represents a fraction of available space.
.grid-container {
  grid-template-columns: 1fr 2fr 1fr;
}
  • Total of 4 fractions.
  • Columns adjust proportionally based on the fr values.
  • Second column is twice as wide as the first and third.

Repeating Columns with repeat()

  • Simplifies repetitive column definitions.
.grid-container {
  grid-template-columns: repeat(3, 1fr);
}
  • Equivalent to grid-template-columns: 1fr 1fr 1fr;.
  • Useful for grids with many equally sized columns.

Adding Gaps Between Grid Items

  • Use grid-gap to add spacing.
.grid-container {
  grid-gap: 20px;
}
  • grid-row-gap: Gap between rows.
  • grid-column-gap: Gap between columns.
  • Gaps do not collapse like margins.

Defining Grid Rows

  • Use grid-template-rows to specify row heights.
.grid-container {
  grid-template-rows: 150px 150px;
}
  • Creates two rows, each 150px tall.
  • Combined with columns to form the grid.

Spanning Items Across Columns and Rows

  • Grid items can span multiple columns and rows.
.grid-item:first-child {
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}
  • Starts at column line 1 and spans 2 columns.
  • Starts at row line 1 and spans 2 rows.
  • Useful for creating featured content areas.

The grid-template-areas Property

  • Define named grid areas for intuitive layouts.
.grid-container {
  grid-template-areas:
    "header header header"
    "nav content sidebar"
    "footer footer footer";
}
  • Assign areas to grid items:
.header { grid-area: header; }
.nav { grid-area: nav; }
.content { grid-area: content; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

Responsive Design with Media Queries

  • Adjust layouts for different screen sizes.
@media (max-width: 768px) {
  .grid-container {
    grid-template-areas:
      "header"
      "nav"
      "content"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}
  • Stacks grid areas vertically on smaller screens.
  • Enhances mobile usability.

Auto-Fit, Auto-Fill, and minmax()

  • auto-fit: Fits as many columns as possible.
.grid-container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
  • auto-fill: Fills the row with columns, even if empty.
  • minmax(min, max): Sets minimum and maximum track sizes.
  • Creates responsive grids that adapt to screen size.

Implicit vs Explicit Grids

  • Explicit Grid: Defined by grid-template- properties.
  • Implicit Grid: Created when items exceed the defined grid.
.grid-container {
  grid-auto-rows: 100px;
}
  • Use grid-auto-rows and grid-auto-columns to style implicit tracks.
  • Helps manage content that doesn't fit into the explicit grid.

Best Practices and Tips

  • Combine Grid and Flexbox:
    • Use Grid for overall page layout.
    • Use Flexbox for aligning items within grid cells.
  • Accessibility:
    • Maintain logical HTML structure.
    • Avoid rearranging items visually in a way that confuses screen readers.
  • Naming Conventions:
    • Use clear names for grid areas to improve readability.

Questions?