Complete Guide to CSS Grid Functions and Properties to Advances
CSS Grid Layout is a powerful tool that allows you to easily create flexible, responsive, and complex web page layouts. It provides a two-dimensional system (rows and columns) to precisely control element positioning.
1. Understanding CSS Grid
??Declaring a Grid Container To declare a grid, add display: grid to a container.
.container {
display: grid;
}
This transforms child elements (grid items) into grid elements.
2. Defining Grid Structure
?? grid-template-columns and grid-template-rows Declares the number of columns and width of rows.
.container {
display: grid;
grid-template-columns: 200px 100px auto;
grid-template-rows: 100px auto;
}
??Creates three columns (fixed 200px, 100px, and auto) and two rows.
??Shortcut: repeat()
grid-template-columns: repeat(3, 1fr);
??Creates 3 equal columns using the fr (fraction) unit.
3. Placing Items in the Grid
??grid-column and grid-row Declares where an item will be placed.
.item {
grid-column: 1 / 3; /* Spans from column 1 to 3 */
grid-row: 2 / 4; /* Spans from row 2 to 4 */
}
??Shorthand: grid-area
.item {
grid-area: 2 / 1 / 4 / 3; /* row-start / col-start / row-end / col-end */
}
4. Advanced Grid Features
??grid-auto-rows and grid-auto-columns Automatically sizes rows/columns for extra content.
.container {
grid-auto-rows: minmax(100px, auto);
}
??Rows will be at least 100px but can stretch.
??grid-gap (or gap) Sets the gap between grid items.
.container {
gap: 20px;
}
??Adds 20px gap between grid items.
??grid-template-areas Declares a named layout structure.
.container {
grid-template-areas:
"header header"
"sidebar content";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
??Creates a semantic layout with names.
5. Justifying and Aligning Content
??justify-items & align-items Sets how items are placed within grid cells.
.container {
justify-items: center; /* Aligns items horizontally */
align-items: center; /* Aligns items vertically */
}
??justify-content & align-content Sets how the entire grid is aligned within the container.
.container {
justify-content: space-between; /* Aligns columns */
align-content: center; /* Aligns rows */
}
?? place-items & place-content (Shorthand) Both justify and align properties are included.
.container {
place-items: center; /* Short for justify-items & align-items */
place-content: stretch; /* Short for justify-content & align-content */
}
6. Responsive Design with Grid
??Using auto-fit and auto-fill Automatically makes grid items responsive.
.container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
??Makes items resize dynamically.
7. Combining Grid and Flexbox
??CSS Grid can be employed in layouts, yet Flexbox is best for placing elements inside grid items.
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
.item {
display: flex;
justify-content: center;
align-items: center;
}
??This centers content inside grid items.
Example:
1. Dashboard Responsive Layout (Admin Panel)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="header">Header</div>
<div class="main">
<div class="card">Card 1</div>
<div class="card">Card 2</div>
<div class="card">Card 3</div>
<div class="card">Card 4</div>
<div class="card">Card 5</div>
<div class="card">Card 6</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.dashboard {
display: grid;
grid-template-columns: 250px auto;
grid-template-rows: auto 1fr;
grid-template-areas:
"sidebar header"
"sidebar main";
height: 100vh;
}.sidebar {
grid-area: sidebar;
background: #333;
color: white;
padding: 20px;
}.header {
grid-area: header;
background: #4A90E2;
padding: 20px;
color: white;
text-align: center;
}.main {
grid-area: main;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
padding: 20px;
}.card {
background: #F5F5F5;
padding: 20px;
border-radius: 10px;
text-align: center;
}
2. Simple 3-Column Layout (Blog or Dashboard)
??Responsive layout with a header, sidebar, main content, and footer.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3-Column Grid Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header class="header">Header</header>
<aside class="sidebar">Sidebar</aside>
<main class="content">Main Content</main>
<aside class="ads">Ads</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: grid;
grid-template-columns: 200px auto 300px;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header header"
"sidebar content ads"
"footer footer footer";
gap: 10px;
height: 100vh;
}
.header { grid-area: header; background: #4A90E2; height: 80px;}
.sidebar { grid-area: sidebar; background: #50E3C2; }
.content { grid-area: content; background: #F5A623; }
.ads { grid-area: ads; background: #D0021B; }
.footer { grid-area: footer; background: #9013FE; height: 80px;}
.container div {
padding: 20px;
text-align: center;
color: white;
}
3. Responsive Image Gallery (Portfolio or E-commerce)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image Gallery</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="gallery">
<img src="https://source.unsplash.com/random/300x300" alt="Image 1">
<img src="https://source.unsplash.com/random/301x301" alt="Image 2">
<img src="https://source.unsplash.com/random/302x302" alt="Image 3">
<img src="https://source.unsplash.com/random/303x303" alt="Image 4">
<img src="https://source.unsplash.com/random/304x304" alt="Image 5">
<img src="https://source.unsplash.com/random/305x305" alt="Image 6">
</div>
</body>
</html>
CSS
body {
margin: 0;
font-family: Arial, sans-serif;
}
.split {
display: grid;
grid-template-columns: 1fr 1fr;
height: 100vh;
}
.left {
background: #4A90E2;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
}
.right {
background: #F5A623;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
}
Final Thoughts
??CSS Grid simplifies the design of layouts without the need for floats or positioning hacks. Combine it with media queries, flexbox, and animations for responsive designs.
??CSS Grid is a modern responsive layout simplified. You can mix it with Flexbox for better alignment inside grid items.
Conclusion
CSS Grid simplifies creating layout designs without using floats and positioning hacks. Combine it with media queries, flexbox, and animations to obtain responsive designs now.