CSS Grid Tracks (Rows and Columns)
A grid container decides how many columns and rows it has, and how large they are.
Three properties control this:
grid-template-columns— how many columns the grid has, and how wide.grid-template-rows— how many rows the grid has, and how high.grid-template-areas— lays out columns and rows through named grid items.
The CSS grid-template-columns Property
Column count and width come from grid-template-columns.
You give it a space-separated list with one value per column, and that value is the column's width.
Typical choices include:
- Fixed lengths, as in 100px 300px 200px
- Percentages, as in 20% 60% 20%
- The
frunit, as in 1fr 2fr 1fr auto, as in auto auto autorepeat(), as in repeat(3, 1fr)minmax(), as in minmax(80px, 1fr) 150px 150px
CSS grid-template-columns: auto
Writing the auto keyword three times gives a grid layout of 3 columns. With content of similar size, as here, the columns end up at equal width.
Example
Three columns of equal width, holding six numbered items.
grid-template-columns: auto auto auto. Place 6 numbered items inside the grid.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Columns Auto</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: auto auto auto</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Grid Columns with Mixed Width
Columns do not have to match in size. You might, for instance, fix the width of 2 columns and leave 1 at auto size.
Example
Here the widths are 80px for column 1, 200px for column 2, and auto size for column 3.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Mixed Width</title>
<style>
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 80px 200px auto</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Grid Columns with the fr Unit
Short for "fraction", the fr unit automatically splits the available space into equal shares called fractions.
So 1fr claims 1 fraction of that space and 2fr claims 2.
Equal columns
The container width is split equally, giving each column 33.3%.
1fr 1fr 1fr). Place 6 numbered items inside the grid.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns FR Equal</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 1fr 1fr 1fr</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Unequal columns
Compared with the others, the second column has double the width.
1fr 2fr 1fr). Place 6 numbered items inside.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns FR Unequal</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: 1fr 2fr 1fr</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Grid Columns with the repeat() Function
A grid can reuse a group of columns or rows many times over through the repeat() function.
Example
Three equal-width columns written with repeat().
repeat() function (repeat(3, 1fr)). Place 6 numbered items inside.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Repeat</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: repeat(3, 1fr)</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
Grid Columns with the minmax() Function
A size range with a minimum and a maximum value comes from the minmax() function: the size is never below the first or above the second.
Example
Never narrower than 80px, the first column can grow as far as 1fr.
minmax(80px, 1fr) 150px 150px for grid-template-columns. Place 6 numbered items inside.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Columns Minmax</title>
<style>
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-columns: minmax(80px, 1fr) 150px 150px</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
The CSS grid-template-rows Property
Row count and height come from grid-template-rows.
Again you supply a space-separated list, and each entry gives one row its height.
Typical choices include fixed lengths, percentages, the fr unit, auto, min-content, max-content, repeat(), minmax(), and fit-content().
Example
The first row gets a height of 80px and the second 200px. Rows beyond those two default to auto.
grid-template-rows: 80px 200px to set the first row to 80px and the second to 200px. Place 8 numbered items inside.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Template Rows</title>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 80px 200px;
}
.container > div {
background-color: #f1f1f1;
border: 1px solid #ccc;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h2>grid-template-rows: 80px 200px</h2>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
</div>
</body>
</html>