CSS Layout

Week 3 - Learning about different CSS layout techniques

CSS Layout Techniques

CSS offers several layout models that control how elements are positioned and displayed on a page. Each has its own strengths and best use cases.

Display Property: Block

Block-level elements start on a new line and take up the full width available. Examples include div, p, h1-h6, and form elements.

Block Element 1
Block Element 2
Block Element 3
.block-example div {
  display: block; /* default for div */
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin-bottom: 10px;
}

Display Property: Inline

Inline elements do not start on a new line and only take up as much width as necessary. Examples include span, a, img, and em.

Inline Element 1 Inline Element 2 Inline Element 3
.inline-example span {
  display: inline; /* default for span */
  background-color: #3498db;
  color: white;
  padding: 10px;
  margin: 5px;
}

Display Property: Inline-Block

Inline-block elements are placed inline like inline elements but can have block properties like width and height.

Inline-Block 1
Inline-Block 2
Inline-Block 3
.inline-block-example div {
  display: inline-block;
  background-color: #3498db;
  color: white;
  padding: 20px;
  margin: 5px;
  width: 150px;
  text-align: center;
}

Flexbox Layout

Flexbox is a one-dimensional layout method for arranging items in rows or columns. It offers powerful alignment and space distribution capabilities.

Basic Flexbox Container:

Flex Item 1
Flex Item 2
Flex Item 3

Justify Content: Space Between

Flex Item 1
Flex Item 2
Flex Item 3

Justify Content: Space Around

Flex Item 1
Flex Item 2
Flex Item 3

Align Items: Center

Item 1
Tall Item
Item 3

Flex Grow

Flex Grow: 1
Flex Grow: 2
Flex Grow: 3
.flex-container {
  display: flex;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Different justify-content values */
.space-between { justify-content: space-between; }
.space-around { justify-content: space-around; }
.center { justify-content: center; }

/* Align items in the cross axis */
.align-center { align-items: center; height: 150px; }

/* Flex grow for items */
.flex-grow-1 { flex-grow: 1; }
.flex-grow-2 { flex-grow: 2; }
.flex-grow-3 { flex-grow: 3; }

CSS Grid Layout

CSS Grid is a two-dimensional layout system designed for layouting out web pages. It allows precise control over placement of items in rows and columns.

Basic Grid (3 columns):

Grid Item 1
Grid Item 2
Grid Item 3
Grid Item 4
Grid Item 5
Grid Item 6

Grid with Spanning Items:

Spans 2 Columns
Grid Item
Grid Item
Spans 3 Columns (Full Width)
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
  grid-gap: 10px;
  background-color: #f1f1f1;
  padding: 10px;
}

/* Items that span multiple columns */
.grid-item-span-2 { grid-column: span 2; }
.grid-item-span-3 { grid-column: span 3; }

Float Layout

The float property was traditionally used for creating multi-column layouts before flexbox and grid. It's still useful for text wrapping around images.

Float Item 1
Float Item 2
Float Item 3
.float-container {
  overflow: auto; /* clearfix */
  background-color: #f1f1f1;
  padding: 10px;
}

.float-item {
  float: left;
  width: 33.33%;
  padding: 10px;
  box-sizing: border-box;
}

Position Property

The position property specifies the positioning method used for an element.

Position Types:

Static (Normal Flow)
Relative (Offset from Normal)
Absolute (Relative to Container)
.position-container {
  position: relative; /* Creates a containing block for absolute elements */
  height: 200px;
}

.position-static { position: static; /* default */ }

.position-relative {
  position: relative;
  top: 20px;
  left: 20px;
}

.position-absolute {
  position: absolute;
  top: 80px;
  right: 20px;
}

.position-fixed {
  position: fixed;
  bottom: 20px;
  right: 20px;
}