CSS grid-template-columns property
The grid-template-columns property in CSS is used to define the number and size of columns in a grid container. It specifies how the available space in the grid container should be divided among the columns, allowing you to create various column layouts within the grid.
Basic Syntax
selector {
grid-template-columns: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 100px 200px 100px; /* Three columns with specific sizes */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightcoral;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
In this example, the grid-template-columns property is set to 100px 200px 100px, creating three columns with specific widths of 100px, 200px, and 100px respectively.
Values for grid-template-columns
1. Fixed Length
You can specify column sizes using fixed lengths like px, em, rem, etc.
.container {
display: grid;
grid-template-columns: 150px 200px; /* Two columns with fixed widths */
}
2. Percentage
You can use percentages to define columns as a proportion of the container's width.
.container {
display: grid;
grid-template-columns: 30% 70%; /* Columns that take up 30% and 70% of the container width */
}
3. Flexible Lengths (fr)
The fr unit represents a fraction of the available space in the grid container. This is useful for creating flexible layouts where columns adapt to the container size.
.container {
display: grid;
grid-template-columns: 1fr 2fr; /* Two columns, second is twice as wide as the first */
}
4. Auto
The auto keyword allows columns to size themselves based on their content. If you set columns to auto, they will expand to fit the content within them.
.container {
display: grid;
grid-template-columns: auto auto; /* Two columns that expand based on content */
}
5. Repeat Notation
The repeat() function allows you to define a pattern for columns. This can simplify the code when you have many columns of the same size.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Three columns of equal width */
}
6. Minmax Function
The minmax() function sets a minimum and maximum size for columns, allowing for responsive designs that adapt to the container size.
.container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Three columns with a minimum width of 100px and flexible width */
}
7. Grid Template Areas (Advanced Usage)
You can combine grid-template-columns with grid-template-areas for more complex layouts. Define the column sizes and then specify how items are placed in these columns using named areas.
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-areas:
"header header header"
"main sidebar sidebar"
"footer footer footer";
}
Practical Examples
Example 1: Equal Width Columns
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightblue;
border: 1px solid blue;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Example 2: Flexible Columns with Minimum and Maximum Sizes
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Three columns with min and max sizes */
grid-gap: 10px; /* Space between grid items */
}
.item {
background-color: lightcoral;
border: 1px solid red;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
Browser Support
The grid-template-columns property is supported in all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It has partial support in Internet Explorer (IE10 and IE11), with some limitations compared to modern browsers.