CSS Intermediate (Part 1)

Learn advanced CSS concepts including layout techniques, flexbox, and CSS grid.

CSS Intermediate Content

This content has been divided into two parts for better readability:

CSS Layout Techniques

CSS offers various techniques for creating layouts. Understanding these techniques is crucial for building well-structured and responsive web pages.

CSS Layout Evolution

CSS layout techniques have evolved significantly over the years:

  • Normal Flow - The default layout method
  • Float-based layouts - Traditional method using float property
  • Positioning - Using position property (relative, absolute, fixed, sticky)
  • Flexbox - One-dimensional layout method for arranging items in rows or columns
  • Grid - Two-dimensional layout system for more complex designs

Normal Flow

Normal flow is the default layout method in CSS. Elements are displayed in the order they appear in the HTML document, with block-level elements stacking vertically and inline elements flowing horizontally.

<div>
    <p>This is a block-level element.</p>
    <p>This is another block-level element.</p>
    <span>This is an inline element.</span>
    <span>This is another inline element.</span>
</div>

This is a block-level element.

This is another block-level element.

This is an inline element. This is another inline element.

Float-based Layouts

The float property was traditionally used for creating multi-column layouts. Elements can be floated left or right, causing them to move to the side of their container.

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

/* Clear floats after the columns */
.row::after {
    content: "";
    display: table;
    clear: both;
}
Column 1
Column 2
Column 3

While float-based layouts were common in the past, modern layout techniques like Flexbox and Grid are now preferred for most use cases.

Flexbox

Flexbox (Flexible Box Layout) is a one-dimensional layout method designed for laying out items in rows or columns. It's particularly useful for distributing space and aligning items in a container, even when their size is unknown or dynamic.

Flexbox Terminology

  • Flex Container - The element with display: flex or display: inline-flex
  • Flex Items - The direct children of the flex container
  • Main Axis - The primary axis along which flex items are laid out (horizontal for row, vertical for column)
  • Cross Axis - The axis perpendicular to the main axis

Creating a Flex Container

To create a flex container, set the display property to flex or inline-flex.

.container {
    display: flex;
    /* or */
    display: inline-flex;
}

Flex Container Properties

Property Description Values
flex-direction Defines the direction of the main axis row (default), row-reverse, column, column-reverse
flex-wrap Controls whether items wrap to multiple lines nowrap (default), wrap, wrap-reverse
flex-flow Shorthand for flex-direction and flex-wrap flex-direction flex-wrap
justify-content Aligns items along the main axis flex-start, flex-end, center, space-between, space-around, space-evenly
align-items Aligns items along the cross axis stretch, flex-start, flex-end, center, baseline
align-content Aligns multiple lines within the container flex-start, flex-end, center, space-between, space-around, stretch

Flex Item Properties

Property Description Values
order Controls the order of items Integer (default: 0)
flex-grow Determines how much an item can grow Number (default: 0)
flex-shrink Determines how much an item can shrink Number (default: 1)
flex-basis Defines the initial size of an item Length, percentage, or auto (default: auto)
flex Shorthand for flex-grow, flex-shrink, and flex-basis flex-grow flex-shrink flex-basis
align-self Overrides the align-items value for specific items auto, flex-start, flex-end, center, baseline, stretch

Flexbox Examples

Basic Flexbox Layout

.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f0f0f0;
    padding: 10px;
}

.item {
    padding: 20px;
    background-color: #4a6fa5;
    color: white;
}
Item 1
Item 2
Item 3

Flexible Items

.container {
    display: flex;
    background-color: #f0f0f0;
    padding: 10px;
}

.item {
    padding: 20px;
    background-color: #4a6fa5;
    color: white;
    margin: 5px;
}

.item-1 { flex: 1; }
.item-2 { flex: 2; }
.item-3 { flex: 1; }
Item 1
Item 2
Item 3

Nested Flexbox

.outer-container {
    display: flex;
    flex-direction: column;
    height: 200px;
    background-color: #f0f0f0;
}

.inner-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex: 1;
    background-color: #e0e0e0;
    margin: 5px;
}

.item {
    padding: 10px;
    background-color: #4a6fa5;
    color: white;
}
Item 1
Item 2
Item 3
Item 4
Item 5

CSS Grid

CSS Grid Layout is a two-dimensional layout system designed for laying out items in rows and columns. It's ideal for creating complex layouts and aligning items in both directions simultaneously.

Grid Terminology

  • Grid Container - The element with display: grid or display: inline-grid
  • Grid Items - The direct children of the grid container
  • Grid Lines - The horizontal and vertical lines that divide the grid
  • Grid Tracks - The space between two adjacent grid lines (rows or columns)
  • Grid Cell - The intersection of a row and a column
  • Grid Area - A rectangular area bounded by four grid lines

Creating a Grid Container

To create a grid container, set the display property to grid or inline-grid.

.container {
    display: grid;
    /* or */
    display: inline-grid;
}

Grid Container Properties

Property Description Example
grid-template-columns Defines the columns of the grid grid-template-columns: 100px 200px 100px;
grid-template-rows Defines the rows of the grid grid-template-rows: 50px 100px;
grid-template-areas Defines named grid areas grid-template-areas: "header header" "sidebar content";
grid-template Shorthand for grid-template-rows, grid-template-columns, and grid-template-areas grid-template: 50px 100px / 100px 200px;
grid-column-gap Sets the gap between columns grid-column-gap: 10px;
grid-row-gap Sets the gap between rows grid-row-gap: 15px;
grid-gap Shorthand for grid-row-gap and grid-column-gap grid-gap: 15px 10px;
justify-items Aligns grid items along the row axis justify-items: center;
align-items Aligns grid items along the column axis align-items: center;
place-items Shorthand for align-items and justify-items place-items: center center;
justify-content Aligns the grid within the container along the row axis justify-content: space-between;
align-content Aligns the grid within the container along the column axis align-content: space-between;
place-content Shorthand for align-content and justify-content place-content: space-between center;

Grid Item Properties

Property Description Example
grid-column-start Specifies the start position of an item on the column axis grid-column-start: 2;
grid-column-end Specifies the end position of an item on the column axis grid-column-end: 4;
grid-row-start Specifies the start position of an item on the row axis grid-row-start: 1;
grid-row-end Specifies the end position of an item on the row axis grid-row-end: 3;
grid-column Shorthand for grid-column-start and grid-column-end grid-column: 2 / 4;
grid-row Shorthand for grid-row-start and grid-row-end grid-row: 1 / 3;
grid-area Shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end grid-area: 1 / 2 / 3 / 4;
justify-self Aligns an item inside its cell along the row axis justify-self: center;
align-self Aligns an item inside its cell along the column axis align-self: center;
place-self Shorthand for align-self and justify-self place-self: center center;

Grid Examples

Basic Grid Layout

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
}

.item {
    padding: 20px;
    background-color: #4a6fa5;
    color: white;
    text-align: center;
}
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Grid Areas

.container {
    display: grid;
    grid-template-areas:
        "header header header"
        "sidebar content content"
        "footer footer footer";
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
    height: 300px;
}

.header { grid-area: header; background-color: #4a6fa5; }
.sidebar { grid-area: sidebar; background-color: #166088; }
.content { grid-area: content; background-color: #47b8e0; }
.footer { grid-area: footer; background-color: #2c3e50; }

.item {
    padding: 20px;
    color: white;
    text-align: center;
}
Header
Sidebar
Content
Footer

Grid Placement

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 80px;
    grid-gap: 10px;
    background-color: #f0f0f0;
    padding: 10px;
}

.item {
    padding: 20px;
    background-color: #4a6fa5;
    color: white;
    text-align: center;
}

.item-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.item-4 {
    grid-column: 2 / 4;
}
Item 1
Item 2
Item 3
Item 4

The fr Unit

The fr unit represents a fraction of the available space in the grid container. It's particularly useful for creating flexible grid layouts.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    /* The second column gets twice as much space as the first and third */
}

The repeat() Function

The repeat() function is used to repeat a pattern of track definitions. It's useful for creating grids with many equally sized tracks.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Creates 3 columns of equal width */
    
    /* Equivalent to: */
    grid-template-columns: 1fr 1fr 1fr;
}

minmax() Function

The minmax() function defines a size range greater than or equal to min and less than or equal to max. It's useful for creating responsive grid layouts.

.container {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 2fr;
    /* First column is at least 100px wide, but can grow to fill available space */
}

auto-fill and auto-fit

The auto-fill and auto-fit keywords are used with the repeat() function to create a responsive grid with a variable number of tracks.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    /* Creates as many 200px columns as will fit in the container */
}

Continue to Part 2

Continue to Part 2 to learn about CSS Positioning, Responsive Design, Transitions, Animations, Transforms, and Modern CSS Features.