CSS Grid is a powerful layout system built in CSS that can easily create complex and responsive web layouts, it defines a 2D layout system that can precisely control rows and columns, you can place elements within this grid by specifying their positions in rows and columns, unlike Flexbox, which is 1-dimensional (works on a single axis).
These are the Following methods through which we can animate CSS Grid:
The easiest way is to animate individual grid objects by changing their position, size, rows or rotation, this does not change the grid layout but it allows adding dynamic effects to elements within the grid.
Example: In this example, we will be animating individual grid items with a transform.
HTML
/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>GeeksforGeeks Grid Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Approach 1) Animating Individual Grid Items with transform</h2>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
</div>
</div>
</body>
</html>
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.container {
text-align: center;
}
h1 {
color: #197b43;
margin-bottom: 10px;
font-size: 2.5rem;
}
h2 {
color: #000000;
margin-bottom: 20px;
font-size: 1.5rem;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
padding: 40px;
border: 5px solid #197b43;
border-radius: 10px;
background-color: white;
}
.grid-item {
background-color: #197b43;
padding: 40px;
color: white;
text-align: center;
font-size: 1.5rem;
transition: transform 0.5s ease-in-out;
border-radius: 5px;
}
.grid-item:hover {
transform: scale(1) rotate(15deg);
}
Output:
Animating Grid Template Areas
This method allows you to change between different web template areas and animate the entire web layout, this allows you to create the effect of configuration changes without changing the HTML structure.
Example: In this example, we will animate grid template areas.
HTML
/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>GeeksforGeeks Grid Template Areas Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Approach 2) Animating Grid Template Areas</h2>
<div class="grid-container">
<div class="header">Header</div>
<div class="sidebar">Sidebar</div>
<div class="main">Main Content</div>
<div class="footer">Footer</div>
</div>
<button id="toggle-layout">Toggle Layout</button>
</div>
<script src="index.js"></script>
</body>
</html>
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.container {
text-align: center;
}
h1 {
color: #197b43;
margin-bottom: 10px;
font-size: 2.5rem;
}
h2 {
color: #000000;
margin-bottom: 20px;
font-size: 1.5rem;
}
.grid-container {
display: grid;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
grid-template-columns: 1fr 2fr;
gap: 15px;
padding: 20px;
border: 5px solid #197b43;
border-radius: 10px;
background-color: white;
transition: grid-template-areas 0.5s ease;
}
.header {
grid-area: header;
background-color: #4CAF50;
color: white;
padding: 20px;
}
.sidebar {
grid-area: sidebar;
background-color: #87cefa;
color: white;
padding: 20px;
}
.main {
grid-area: main;
background-color: #32cd32;
color: white;
padding: 20px;
}
.footer {
grid-area: footer;
background-color: #ffa500;
color: white;
padding: 20px;
}
.grid-container.active {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #10d566;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #388e3c;
}
document.getElementById('toggle-layout').addEventListener('click', function() {
document.querySelector('.grid-container').classList.toggle('active');
});
Output:
Animating Grid Track Sizes
The alteration of grid track size animation can help to implement the sensitive resizing of columns or rows, this is helpful in responsive or interactive designs where some space expands or contracts based on user action.
Example: In this example, we will animate grid track sizes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>GeeksforGeeks Grid Track Sizes Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Approach 3) Animating Grid Track Sizes</h2>
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<button id="resize-grid">Resize Grid</button>
</div>
<script src="index.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.container {
text-align: center;
}
h1 {
color: #197b43;
margin-bottom: 10px;
font-size: 2.5rem;
}
h2 {
color: #000000;
margin-bottom: 20px;
font-size: 1.5rem;
}
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 15px;
padding: 20px;
border: 5px solid #197b43;
border-radius: 10px;
background-color: white;
transition: grid-template-columns 1s ease-in-out;
}
.grid-item {
background-color: #197b43;
padding: 40px;
color: white;
text-align: center;
font-size: 1.5rem;
border-radius: 5px;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #197b43;
}
.grid-container.resized {
grid-template-columns: 2fr 1fr 2fr;
}
document.getElementById('resize-grid').addEventListener('click', function() {
document.querySelector('.grid-container').classList.toggle('resized');
});
Output:
Animating Grid Item Position
This approach allows you to animate the position of individual grid items by transitioning their grid-column and grid-row values. It can create a visual effect of moving elements within the grid, such as reordering items or shifting them to different sections.
Example: In this example, we will animate grid item position using grid-column and grid-row.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>GeeksforGeeks Grid Item Position Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<h2>Approach 4) Animating Grid Item Position Using grid-column and grid-row</h2>
<div class="grid-container">
<div class="grid-item item-1">1</div>
<div class="grid-item item-2">2</div>
<div class="grid-item item-3">3</div>
<div class="grid-item item-4">4</div>
</div>
<button id="reposition-grid">Reposition Items</button>
</div>
<script src="index.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
h1 {
color: #197b43;
margin-bottom: 10px;
font-size: 2.5rem;
}
h2 {
color: #020202;
margin-bottom: 20px;
font-size: 1.5rem;
}
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* Use auto-fit to dynamically adjust the column width */
gap: 15px;
padding: 20px;
border: 5px solid #197b43;
border-radius: 10px;
background-color: white;
transition: grid-column 1s ease, grid-row 1s ease;
width: 100%;
/* Set width to 100% to prevent overflow */
max-width: 500px;
/* Add a maximum width if needed */
}
.grid-item {
background-color: #197b43;
padding: 40px;
color: white;
text-align: center;
font-size: 1.5rem;
border-radius: 5px;
}
.item-1 {
grid-column: 1;
grid-row: 1;
}
.item-2 {
grid-column: 2;
grid-row: 1;
}
.item-3 {
grid-column: 3;
grid-row: 1;
}
.item-4 {
grid-column: 1;
grid-row: 2;
}
.grid-container.repositioned .item-1 {
grid-column: 2;
grid-row: 2;
}
.grid-container.repositioned .item-2 {
grid-column: 3;
grid-row: 1;
}
.grid-container.repositioned .item-3 {
grid-column: 1;
grid-row: 1;
}
.grid-container.repositioned .item-4 {
grid-column: 2;
grid-row: 1;
}
button {
margin-top: 20px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
button:hover {
background-color: #197b43;
}
document.getElementById('reposition-grid').addEventListener('click', function() {
document.querySelector('.grid-container').classList.toggle('repositioned');
});
Output:
Similar Reads
Introduction to Animate CSS
What is Animate.css?Animate.css is a cross-browser CSS Animations library that makes it easy to add animations to your web projects. It's simple to use, and lightweight making your website more dynamic and engaging. Animate.css provides pre-made CSS animations that can be easily integrated into web
5 min read
How to Animate SVG with CSS?
Animating SVGs (Scalable Vector Graphics) with CSS is a powerful technique to bring vector-based images to life on websites. The SVG animations enhance user experience and add dynamic interactivity to the static visuals. Since SVGs are XML-based each element inside them can be controlled individuall
3 min read
How to make CSS Animations ?
Animation is a way using which we can create the illusion of motion by placing still images one after another in a typical format. For example, we can have a ball rising up at some instant then falling down as an animation effect. CSS provides us with some properties to control the animation effect
3 min read
How to Create a Flexbox Grid?
Flexbox is a powerful layout module in CSS that is designed to provide an efficient way to align and distribute space among items in a container. It is particularly useful for creating flexible and responsive grid layouts. Different Approach for Creating a Flexbox Grid:Table of ContentBasic Flexbox
4 min read
Primer CSS Rotation Animation
Primer CSS animations are generally used to get the user's attention towards the animating element and for a better user experience. In this article, we will be seeing Primer CSS Rotation Animation. To apply the rotation animation to an element, we have to add the anim-rotate class to the element. A
2 min read
Primer CSS Grow x Animation
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read
Tailwind CSS Grid Auto Rows
This class accepts more than one value in tailwind CSS in which all the properties are covered as in class form. It is the alternative to the CSS grid-auto-rows property. This class is used to specify the size for the rows of implicitly generated grid containers. This class is used to utilities to c
3 min read
How to Create a 4-Column Layout Grid with CSS?
We can create a layout with multiple columns using CSS. It is easier to design complex layouts. In this article, we are going to discuss how to create a 4-column layout grid using CSS. We will discuss different approaches, their syntax, and code examples of each method. A 4-column layout grid is a c
3 min read
CSS grid-area Property
The grid-area property specifies a grid item's size and location in a grid layout. It allows you to define the starting and ending row and column lines for an item, or to assign a name to the item for easy reference in grid templates.Syntaxgrid-area: grid-row-start | grid-column-start | grid-row-end
3 min read
How to Create a 2-Column Layout Grid with CSS?
Creating a two-column layout is a common design pattern used in web development. This layout helps to organize content efficiently and is used across various types of websites. A 2-column layout divides the webpage into two sections, which can be useful for creating sidebars, main content areas, or
4 min read