CSS Positioning Fundamentals

Block and Inline

  • Block-level elements automatically start on a new line
  • Examples: headings, paragraphs, and divs.

display: block

  • Inline items sit within surrounding content.
  • Examples: images and spans.
  • Inline doesn't let you set width and height. You must put text inside a div or use a span.

display: inline

Inline doesn't let you set width and height.
That's why we added text inside these divs.
All the elements here are display: inline.
  • Inline-block elements align on the same line but not wrapped.
  • Within inline-block elements, you can set width and height of the div.

display: inline-block

position: relative

  • With relative positioning, you can specify how an element should move relative to its current position in the normal page flow.
  • Use CSS offset properties top, right, bottom or left.

position: absolute

  • Absolute position locks an element in place relative to its parent container.
  • Unlike relative, absolute removes an element from the normal flow. Other elements ignore it.
  • Use CSS offset properties top, right, bottom or left.
  • The element will be locked relative to its closest positioned ancestor.
  • The parent item must have a position rule (typically done with position: relative.) Otherwise the browser will default to the body tag.

position: fixed

  • Fixed position locks an element from scrolling. It locks relative to the browser window.
  • Use CSS offset properties top, right, bottom or left.
  • Fixed removes the element from the normal document flow.
CSS Flexbox: When to Use

When positioning elements in one dimension.

Make a Row or Column

Use the flex-direction attribute with properties row, column, row-reverse or column-reverse.

Example:

display: flex;
flex-direction: row;
CSS Flexbox: Examples

Align Elements on the Main Axis

justify-content: center

justify-content: flex-start

justify-content: flex-end

justify-content: space-between

justify-content: space-around

justify-content: space-evenly

Align Elements on the Cross Axis

align-items: flex-start

align-items: flex-end

align-items: center

align-items: stretch

align-items: baseline

Split Flexbox Wrap

By default, a flexbox fits all flex items together on one row or column.
With flex-wrap, you can break the default item wrapping.

flex-wrap: nowrap

flex-wrap: wrap

Shrink Items to Fit Flexbox

flex-shrink: 1; flex-shrink: 2; flex-shrink: 3;

Grow Items as Parent Expands

flex-grow: 1; flex-grow: 2; flex-grow: 3;

Set Initial Size Before Shrink and Grow

flex-basis: auto

Shorthand Flex Grow, Shrink and Basis

flex: 1 1 200px; flex: 2 2 200px; flex: 3 3 200px;

Rearrange Items in a Flexbox

order: 3; order: 2; order: 1;

Override Item Alignment Individually

  • Flex items don't allow CSS properties float, clear or vertical-align.
  • Align-self takes the same values as align-items.
  • Align-self overrides the align-items property.

align-self: center;

CSS Grid: When to Use

CSS Grid turns an HTML element into a grid container. You can place child elements into the rows and columns.

Make a Grid with Columns

display: grid;
grid-template-columns: 25% 25% 25%;

Make a Grid with Rows and Columns

grid-template-row: 100px 100px;

Change Size of Columns with Units

grid-template-columns: 100px 10em 5fr 50% auto;

Make Gaps Between Columns or Rows

grid-column-gap: 10px;

Make All Gaps at Once

grid-gap: 20% 10%;

Set the Columns an Item Consumes with Lines

on first item:
grid-column: 2 / 3;

Set the Rows an Item Consumes with Lines

grid-template-rows: 75px 75px;
on first item:
grid-row: 1 / 3;

CSS Grid: Examples

Justify a Cell's Item Horizontally

default:
justify-self: stretch;

justify-self: stretch
justify-self: start
justify-self: center
justify-self: end
justify-self: center

Justify a Cell's Item Vertically

default:
align-self: stretch;

align-self: stretch
align-self: start
align-self: center
align-self: end
align-self: center

Justify All Items Horizontally Simultaneously

justify-items: center;

Justify All Items Vertically Simultaneously

align-items: start;

Divide Grid into Area Template

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

header header header footer footer footer

Place Items into Grid Area

grid-area: header;

header header header footer footer footer

Make an Area without an Area Template

grid-area: 1st horiz. line / 1st vert. line / last h. line / last v. line;

header (grid-area: 1 / 2 / 3 / 4;) header header footer footer footer

Make Multiple Rows or Columns Simultaneously

grid-template-columns: repeat (4, 25%);

Shorthand for Min and Max Cell Size

grid-template-rows: minmax(50px, 200px);

Make a Flexible Layout with Repeat's Auto-Fill

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

Resize Cells with Repeat's Auto-Fit

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

Media Queries for Responsive Design

@media (min-width: 1000px) {
.grid-template-areas-with-sidebar:
"sidebar header header"
"sidebar footer footer"; }

grid-area: sidebar; grid-area: header; grid-area: footer;

Make a Grid within a Grid

display: grid;
grid-template-columns: 50% 50%;

grid-area: sidebar; first column within the header second column within the header grid-area: footer;