Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
One-dimensional (row OR column)
Two-dimensional (rows AND columns)
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}This creates 3 equal-width columns with 20px spacing!
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="demo">
<h1>🎯 3-Column Grid</h1>
<div class="grid">
<div class="box">Item 1</div>
<div class="box">Item 2</div>
<div class="box">Item 3</div>
<div class="box">Item 4</div>
<div class="box">Item 5</div>
<div class="box">Item 6</div>
</div>
</div>
</body>
</html>Loading preview...
The grid-template-columns property defines the width of each column.
grid-template-columns: 1fr 1fr 1fr;Three equal columns
grid-template-columns: 200px 1fr 200px;Fixed sidebars, flexible center
grid-template-columns: repeat(3, 1fr);Shorthand for equal columns
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));Responsive! Auto-adjusts columns
1fr 2fr means the second column is twice as wide as the first!<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="demo">
<h1>📱 Responsive Grid</h1>
<div class="subtitle">Try resizing your browser!</div>
<div class="grid">
<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 class="card">Card 7</div>
<div class="card">Card 8</div>
</div>
</div>
</body>
</html>Loading preview...
Create complex layouts visually using named grid areas - perfect for page layouts!
.container {
display: grid;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
gap: 20px;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }Spacing between all grid items
gap: 20px;Different spacing for rows & columns
row-gap: 20px;
column-gap: 40px;