Display Grid and Template Columns Rows
Enable CSS Grid and define column and row tracks using grid-template-columns and rows.
Display Grid and Template Columns Rows is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Enabling CSS Grid
CSS Grid is activated with display: grid on a container. Its direct children become grid items automatically placed into cells.
.layout {
display: grid;
}grid-template-columns
grid-template-columns defines the number and size of columns. Each value creates one column track.
.layout {
display: grid;
grid-template-columns: 200px 1fr 1fr;
/* 3 columns: 200px fixed, two equal flexible columns */
}grid-template-rows
grid-template-rows defines explicit row tracks. Items beyond defined rows create implicit rows.
.layout {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
/* header: auto height, main: grows, footer: auto */
}Column and Row Tracks
Each value in grid-template-columns or grid-template-rows creates one track. Tracks can use any size unit:
- Fixed:
200px,10rem - Flexible:
1fr - Content-based:
auto,min-content,max-content
The fr Unit
fr (fraction unit) distributes available space after fixed sizes are subtracted. 1fr 2fr creates columns in a 1:2 ratio.
.grid {
display: grid;
grid-template-columns: 300px 1fr 2fr;
/* 300px fixed, then remaining space split 1:2 */
}Auto in Tracks
auto in a track sizes to fit the content. As a column, it takes the minimum needed by its widest cell; as a row, it fits the tallest cell.
.sidebar-layout {
display: grid;
grid-template-columns: auto 1fr;
/* sidebar: fits content, main: fills rest */
}Page Layout Example
A common three-row page layout with header, main, and footer:
.page {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100dvh;
}
/* header: natural height */
/* main: fills available space */
/* footer: natural height */grid-template Shorthand
grid-template combines rows and columns:
.grid {
grid-template:
"header" auto
"main" 1fr
"footer" auto
/ 1fr;
}Inspecting Grid in DevTools
Chrome and Firefox DevTools can overlay grid track lines on the page. Click the grid badge in the Elements panel to visualize columns, rows, gaps, and named areas.
Grid vs Flexbox Choice
Use Grid when you need to control both rows and columns simultaneously. Use Flexbox for one-dimensional layouts (a row of items or a column of items). Many layouts use both.
Line Numbers
Grid automatically numbers its lines starting from 1. You can reference these numbers to place items manually. Column lines run 1 to n+1 where n is the column count.
.header {
grid-column: 1 / -1; /* spans all columns */
}Quick Check
What does grid-template-columns: 200px 1fr 2fr create?
Recap
display: grid creates a grid container. grid-template-columns and grid-template-rows define tracks. The fr unit distributes remaining space proportionally. auto sizes to content. Grid is ideal for two-dimensional layout control.
Frequently asked questions
Is the “Display Grid and Template Columns Rows” lesson free?
Yes — the full text of “Display Grid and Template Columns Rows” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Display Grid and Template Columns Rows”?
Enable CSS Grid and define column and row tracks using grid-template-columns and rows. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Display Grid and Template Columns Rows” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Display Grid and Template Columns Rows
- The fr Unit and Repeat
- Gap and Grid Placement
- Grid Template Areas