Block Elements

display: block;
/* Takes full width
   Starts on new line
   Can set width/height */

Examples: <div>, <p>, <h1>, <section>

Inline Elements

display: inline;
/* Only takes needed width
   Stays in line with text
   Cannot set width/height */

Examples: <span>, <a>, <strong>

Inline-Block

display: inline-block;
/* Best of both worlds!
   Stays inline
   Can set width/height */

Common use: Navigation links, buttons

None

display: none;
/* Completely removes element
   Takes no space */

Relative

.box {
    position: relative;
    top: 20px;
    left: 30px;
}
/* Moves 20px down, 30px right
   Original space is preserved! */

Think of it as: "Move from where you normally would be"

Absolute

.parent {
    position: relative; /* Creates context */
}
.child {
    position: absolute;
    top: 0;
    right: 0;
}
/* Positioned to top-right of parent */

Fixed

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

• Stays in place when scrolling
• Relative to the viewport (browser window)
• Removed from document flow

Common uses:

• Fixed navigation bars
• Chat widgets
• "Back to top" buttons
• Cookie consent banners

Sticky

.section-header {
    position: sticky;
    top: 0;
    background: white;
}

• Acts like relative until scroll threshold
• Then "sticks" like fixed
• Requires top/bottom/left/right value

Common uses:

• Table headers
• Section headings in long pages
• Sidebar navigation

Enable Flexbox

.container {
    display: flex;
}
/* All direct children become
   flex items! */

Default Behavior

• Items line up in a row
• Items stretch to same height
• Items don't wrap

Live Demo

display: flex applied to parent

flex-direction

flex-direction: row;      /* default */
flex-direction: row-reverse;
flex-direction: column;
flex-direction: column-reverse;

flex-wrap

flex-wrap: nowrap;   /* default */
flex-wrap: wrap;     /* items wrap */
flex-wrap: wrap-reverse;

justify-content (main axis)

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

align-items (cross axis)

align-items: stretch;    /* default */
align-items: flex-start;
align-items: flex-end;
align-items: center;
align-items: baseline;

gap

gap: 20px;           /* all gaps */
gap: 10px 20px;      /* row, column */
row-gap: 10px;
column-gap: 20px;

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

flex-grow

.item {
    flex-grow: 1;  /* Take available space */
}
/* If all items have flex-grow: 1,
   they share space equally */

flex-shrink

.item {
    flex-shrink: 0;  /* Don't shrink */
}
/* Default is 1 (can shrink) */

flex-basis

.item {
    flex-basis: 200px;  /* Starting size */
}
/* Like width, but respects flex */

flex Shorthand

/* flex: grow shrink basis */
flex: 1;           /* flex: 1 1 0% */
flex: 0 0 200px;   /* Fixed 200px */
flex: 1 1 auto;    /* Flexible */

align-self

.special-item {
    align-self: flex-end;
}
/* Override align-items for one item */

order

.first {
    order: -1;  /* Move to start */
}
/* Default order is 0 */

.item { flex: 1; }  /* Equal width items */

Enable Grid

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 200px;
    gap: 20px;
}

Key Concepts

• Track: A row or column
• Cell: Intersection of row and column
• Line: Dividers between tracks
• Area: One or more cells

Live Demo

grid-template-columns: repeat(3, 1fr)

Container Properties

/* Define columns */
grid-template-columns: 200px 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit,
    minmax(250px, 1fr));

/* Define rows */
grid-template-rows: 100px auto 100px;

/* Gaps */
gap: 20px;
row-gap: 10px;
column-gap: 20px;

Alignment

justify-items: center;  /* horizontal */
align-items: center;    /* vertical */
place-items: center;    /* both! */

Item Properties

/* Span multiple columns */
grid-column: 1 / 3;    /* line 1 to 3 */
grid-column: span 2;   /* span 2 cols */

/* Span multiple rows */
grid-row: 1 / 4;

/* Shorthand */
grid-area: 1 / 1 / 3 / 4;
/* row-start/col-start/row-end/col-end */

grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }

Use Flexbox When:

• Layout is one-dimensional (row OR column)
• Content should dictate layout
• You need items to wrap naturally
• Building components (nav, cards, buttons)

Examples:

• Navigation menus
• Card layouts
• Centering content
• Form layouts
• Icon + text combinations

Use Grid When:

• Layout is two-dimensional (rows AND columns)
• Layout should dictate content placement
• You have a complex, structured layout
• Building page layouts

Examples:

• Page layouts (header, sidebar, main, footer)
• Image galleries
• Dashboard layouts
• Magazine-style layouts
• Complex form layouts

Key Concepts

• Display: block, inline, inline-block, flex, grid
• Position: static, relative, absolute, fixed, sticky
• Flexbox: 1D layouts, justify-content, align-items
• Grid: 2D layouts, grid-template, fr units
• z-index: Stack order for positioned elements

Best Practices

• Use Flexbox for components
• Use Grid for page layouts
• Always set position: relative on parent for absolute children
• Use gap instead of margins for flex/grid spacing
• Test layouts at different screen sizes