1 of 22

13. CSS Layouts

MSER 521�Fall 2025

1

2 of 22

Outline

  1. Overview
  2. CSS Units
  3. Media Queries
  4. Intro to CSS Grid
  5. Intro to CSS Flex (often referred to as “flexbox”

2

3 of 22

Outline

  • Overview
  • CSS Units
  • Media Queries
  • Intro to CSS Grid
  • Intro to CSS Flex (often referred to as “flexbox”

3

4 of 22

CSS & Layouts

Layouts are the hardest thing about CSS for many reasons:

  1. The language has many, many different layout ‘paradigms’ for doing the same thing.
  2. Specifying the rules for arranging boxes the right way is difficult
  3. You have to design for several different browser configurations (what looks good on a desktop doesn’t necessarily look good on mobile).
  4. Everything has to be flexible and resizable so that it scales gracefully.

4

5 of 22

Layout Tips

  1. Use CSS Grid to define columns (rows are rarely needed)
  2. Use Flex to align items within a container
  3. Design your website so that it is responsive (looks good on a mobile, tablet, and desktop). Using Flexbox and CSS Grid will help you with mobile layouts.
  4. Avoid older hacks (floats, putting everything inside a table, absolute positioning) – or else use as a last resort.

6 of 22

Outline

  • Overview
  • CSS Units
  • Media Queries
  • Intro to CSS Grid
  • Intro to CSS Flex (often referred to as “flexbox”

6

7 of 22

CSS Units: Absolute Units

7

Units

Example

Pixels

width: 300px;

Points

font-size: 12pt;

https://codepen.io/vanwars/pen/PoeYGJo?editors=0100

8 of 22

CSS Units: Absolute Units

When you’re defining the dimensions of your containers, you typically want to use relative units (percentages, em, rem, vw / vh) so that your layouts resize and look good on multiple screens.

8

9 of 22

CSS Units: Relative Units

9

https://codepen.io/vanwars/pen/PoeYGJo?editors=0100

Units

Description

Example

em

Relative to the size of the parent element (2em means 2 times the parent element’s font size).

font-size: 2em;

rem

Relative to size of the root html element (2rem means 2 times the html element’s font size).. See em v. rem CodePen.

font-size: 2rem;

fr

“Fractional units” of the available space (within the parent element).

grid-template-columns:

1fr 1fr 40px 20%;

vw

Relative to 1% of the width of the viewport (size of browser window)

width: 30vw;

vh

Relative to 1% of the height of the viewport (size of browser window)

width: 10vw;

%

Relative to the parent element

width: 100%;

10 of 22

Outline

  • Overview
  • CSS Units
  • Media Queries
  • CSS Grid
  • CSS Flexbox

10

11 of 22

Using Media Queries

Media queries allow you to set CSS style rules based on the type of media and the device dimensions of the viewport. Example:

12 of 22

“Turning On” Media Queries in your HTML

In order to make sure that media queries are honored, you need to include a meta tag in the <head></head> of your html file:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

13 of 22

Practice: 00-media-query

13

Tablet or Mobile

Desktop

14 of 22

Outline

  • Overview
  • CSS Units
  • Media Queries
  • CSS Grid
  • CSS Flexbox

14

15 of 22

CSS Grid Cheatsheet

  • Give you control over how your website is laid out in both the horizontal and vertical directions.
  • REQUIRED: Parent grid properties (for the grid container):
    • display (should be set to grid).
    • grid-template-columns
    • gap�
  • OPTIONAL: Child grid properties (for arranging individual items within the grid):
    • grid-column-start
    • grid-column-end (with or without span keyword)
    • grid-column (where you can specify both start and end)

15

16 of 22

CSS Grid Practice

Desktop

Mobile

16

17 of 22

Browser Inspector Demo

18 of 22

Outline

  • Overview
  • CSS Units
  • Media Queries
  • CSS Grid
  • CSS Flexbox

18

19 of 22

Using Flexbox: Suggested Strategy

Parent Container�Put the display into “flex mode” display: flex and then use the following properties to align the child items:

  1. align-items: (flex-start, flex-end, space-around, space-between, center)
  2. justify-content: (same as align-items)
  3. flex-direction: (row, column, row-reverse, column-reverse)
  4. flex-wrap: (no-wrap, wrap, wrap-reverse)

​

Child Container

Apply sizing to the child container as needed, using the box model (padding, margin, width, height, border).

20 of 22

Flexbox Froggy

20

21 of 22

Flexbox: Practice

22 of 22

Start Lab 4

22