CSS Grid, Transitions and Animations

Day 6 - CSS - CSS Grid, Transitions and Animations

Niotechone Marketing Team
November 21, 2025
10:30 am

Introduction

Welcome to the exciting opportunity of modern CSS layout and animations!

In this tutorial, you will learn how to create beautiful responsive web layouts using CSS Grid, which is one of the most powerful layout systems available today in CSS. We will also learn how to add smooth transitions and animations that make your websites feel alive.

Why is this worthwhile?

CSS Grid makes complex layouts simple. No more using floats or tricky positioning!
Transitions provide smooth professional effects when users interact with your website.
Animations provide personality and polish to your web pages, making them more engaging.

You will be able to create modern, interactive layouts that look and feel like they’re professionally developed by the end of this tutorial. Let’s get started!

Step-by-Step Tutorial

Step 1: Setting Up the HTML Structure

To begin, we want to generate the earliest outline of the HTML for our layout:

🌐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid, Transitions & Animations</title>
  <link rel="stylesheet" href="Grid_Transitions_Animations.css">
</head>
<body>
  <div class="container">
    <div class="main">
      <div class="card">Option 1</div>
      <div class="card">Option 2</div>
      <div class="card">Option 3</div>
      <div class="card">Option 4</div>
    </div>
    <div class="footer">Footer Content</div>
  </div>
</body>
</html>

What’s happening here?

We created a container div that will hold our entire grid layout
We have main section with multiple card elements
A footer is located at the bottom
A link to external CSS will style everything

Pro Tip: When you build your HTML, we suggest always structuring it in a semantic way before adding styles. This makes logic easier to follow to read and maintain!

Step 2: Basic Body Styling

And here are a few lines of foundational styles:

🎨

body {
  font-family: sans-serif;
  margin: 0;
  padding: 20px;
  background: #f4f4f4;
}

Understanding this code:

font-family: sans-serif – Adds a clean, modern font for the whole page
margin: 0 – Removes default browser margins for a cleaner style
padding: 20px – Provides breathing room for the whole page
background: #f4f4f4 – Applies a light gray color to the background

Note: Always set your body margins to zero to prevent bizarre spacing issues!

Step 3: Creating the Grid Container

Now we are ready to set up the CSS Grid magic:

🎨

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 80px auto 60px;
  gap: 20px;
}

Breaking it down:

display: grid – Sets the container to use CSS Grid
grid-template-areas – Names areas for our layout (like a blueprint!)
- “header header” means our header will span both columns
- “sidebar main” creates 2 columns in the middle
- “footer footer” creates our footer, which is going to span both columns
grid-template-columns: 1f r 3 f r – Who knew a sidebar (1 part) and a main (3 parts) could look so good together!
grid-template-rows: 80px auto 60px – 80px is for the header, the middle can be flexible with content, and 60px is for the footer.
gap: 20px – This adds a gap of 20px between all grid items.

Pro tip: The f r unit (fractional unit) is great for responsive layouts. 1f r 3 f r means you are saying “give the first column 1 part and the second column 3 parts of the available space”!

Step 4: Styling the Header (Optional in Your Code)

🎨

.header {
  grid-area: header;
  background: #4caf50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

What this accomplishes:

grid-area: header – Places this element in the “header” region we defined
background: #4caf50 – A pleasant green background color
display: flex with align-items and justify-content – Align content in the middle of the row and column
font-size: 24px – Places the header text at a larger size

Step 5: Creating the Responsive Card Grid

Now this is where it gets really cool:

🎨

.main {
  grid-area: main;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 10px;
}

Why this is cool:

grid-area: main – Places this element in the “main” region of our parent grid
display: grid – Yes! You can have grids inside grids!
grid-template-columns: repeat ( auto-fill, minmax(200px, 1f r)) – And this is the magic line!
- repeat(auto-fill,…) – this automatically makes as many columns will fit
- minmax(200px, 1f r) – each of the cards will be at least 200px but can occupy larger areas if available
gap: 10px 10px – 10px gap between rows and columns

Note: This single line makes an entirely responsive grid! The cards will wrap to new rows when the screen size is less. No media queries!

Step 6: Adding Transitions to Cards

Now let’s make our cards interactive:

🎨

.card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  animation: fadeIn 1s ease forwards;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgb(197, 198, 197);
}

Understanding transitions:

background: white with padding: 20px– making the card looks clean
border-radius: 10px – rounding corners makes it feel more modern
transition: transform 0.3s ease, box-shadow 0.3s ease– the magic: this says
- Animate the transform or box-shadow property for 0.3s,
- use the ease timing function for smooth “natural” motion.
hover state:
- transform: scale(1.05) – This will make the card 5% larger.
- box-shadow: 0 10px 20px – This will add a shadow for depth.

Pro tip: Specify transition properties and do not use transition: all for performance!

Step 7: Creating the Fade-In Animation

Now let’s define a custom animation:

🎨

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

How are animations created:

@keyframes fadeIn – Defines a reusable animation called “fadeIn”
from state – Where it starts: You cannot see it (opacity: 0) and it is 20px down
to state – Where it ends: You can see all of it, and it is in the original position
And guess what, now we have a “fade up” effect!

Now, we can apply this to an element:

🎨

.animation {
  animation: fadeIn 1s ease forwards;
}

fadeIn – The name of the animation
1s – Length (1 second)
ease – Timing function makes the motion even smoother
forwards – After the animation is complete, hold the element in the final state

Step 8: Styling the Footer

Finally, let’s complete our layout:

🎨

.footer {
  grid-area: footer;
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

It’s simple, but effective:

grid-area: footer – This will place this in the footer area
Dark background (#333) with white text for contrast
Flexbox centers the content perfectly

Complete Code Explanation

The Grid Layout System

The most impressive aspect of this project is the number of lines of code involved in the CSS Grid for the entire page layout. The container utilizes named grid areas, which makes the CSS extremely readable and maintainable.

The process:

Container defines the grid as a whole
Every child element is assigned to a named area
Grid does the work of positioning and sizing components
Gaps create vertical and horizontal spacing consistently

Nesting a Grid

The .main section shows off a powerful method – nesting grids. Within our main grid layout, we create a grid for the cards. This grid utilizes auto-fill and minmax() to create a responsive card layout that fills any screen width and height.

Why is this important? You’ll never need to write media queries for a basic responsive layout when working with this.

Transitions vs Animations

Transitions and animations are both shown in this project:

A transition (on .card:hover) – reacts to the state of the element changing (for example, hover)
An animation (fadeIn) – happens automatically when the page loads

In summary, the primary difference between a transition and animation is that transitions require a trigger (like hover, focus, etc.), while an animation can simply happen on the timeline you created.

Tables of Key Concepts

1. Components / Keywords Used

Name	Description
display: grid	Activates CSS Grid layout on an element
grid-template-areas	Defines named areas in the grid using a visual template
grid-template-columns	Specifies the width of each column in the grid
grid-template-rows	Specifies the height of each row in the grid
grid-area	Assigns an element to a named grid area
gap	Creates spacing between grid items
repeat()	Function to repeat column/row patterns
auto-fill	Automatically creates as many tracks as will fit
minmax()	Sets minimum and maximum size for grid tracks
fr (fractional unit)	Represents a fraction of available space
transition	Creates smooth changes between property values
@keyframes	Defines custom animation sequences
animation	Applies a keyframe animation to an element
:hover	Pseudo-class triggered when mouse hovers over element

2. Key Properties / Parameters / Features

Name	Description
transform: scale()	Enlarges or shrinks an element
transform: translateY()	Moves an element vertically
box-shadow	Adds shadow effects around an element
opacity	Controls transparency (0 = invisible, 1 = fully visible)
border-radius	Rounds the corners of an element
ease	Timing function that starts slow, speeds up, then slows down
forwards	Animation keeps final keyframe values after completion
align-items: center	Centers flex/grid items vertically
justify-content: center	Centers flex/grid items horizontally
auto	Allows the browser to calculate size automatically
1fr 3fr	Divides space in a 1:3 ratio

Useful References

Looking to learn more? Here’s some good material:

Official Documentation:

MDN: CSS Grid Layout – Comprehensive guide to CSS Grid
MDN: CSS Transitions – Everything about transitions
MDN: CSS Animations – Mastering keyframe animations

Interactive Learning:

CSS Grid Garden – Learn Grid through a fun game!
CSS-Tricks: A Complete Guide to Grid – Visual reference guide
W3Schools CSS Grid – Beginner-friendly tutorials with examples

Practice & Tools:

Grid by Example – Real-world Grid layout patterns
Animista – Generate CSS animations with a visual tool
Keyframes.app – Create and test CSS animations

Video Tutorials:

Kevin Powell’s CSS Grid Tutorials – Excellent YouTube channel for CSS
freeCodeCamp CSS Grid Course – Free comprehensive courses

Source code:

https://github.com/niotechoneSoftware/dotnet-developer-roadmap/tree/main/CSS-Fundamentals/Day%206%20-%20CSS%20-%20Grid%2C%20Transitions%20and%20Animations

Summary – What You Learned

Completing Day 6 – CSS Grid, Transitions & Animations, taught you to create modern responsive layouts with CSS Grid and embellish them with fluid transitions and animations. You learned how to define grid areas, nested grids, the powerful functions, repeat(), auto-fill, and minmax(), and hover transition effects for interactions. You learned how keyframe animations work, and how they add life through movement. Now, you can create attractive, professional, responsive web designs without relying on complex positioning and media queries. Make sure to continue practicing different grid structures holistically and different animation approaches to develop your design practice!