The grid-template-columns property in CSS is a fundamental part of the CSS Grid Layout, which allows you to define the structure of grid columns within a grid container. This property specifies the width of each column in a grid layout, making it easy to create complex, responsive web designs.
Syntax
grid-template-columns: value1 value2 value3 ...;
Each value specifies the width of a column. You can use various units such as pixels (px), percentages (%), fractions (fr), and more.
Values
· Length units: You can specify fixed widths using units like px, em, rem, etc.
· Percentages: Columns can be defined using %, which relates to the width of the grid container.
· Fractional units (fr): These represent a fraction of the available space. This is one of the most powerful aspects of CSS Grid.
· Auto: The column will take up as much space as its content requires.
· Minmax(): This function allows you to set a minimum and maximum size for a column.
· Repeat(): A convenient function to repeat the same column width multiple times.
grid-template-columns.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 100px 200px 150px auto;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
</div>
</body>
</html>
grid-template-columns: 100px 200px 150px auto;
Above line sets the widths for the four columns.
· The first column is 100 pixels wide.
· The second column is 200 pixels wide.
· The third column is 150 pixels wide.
· The fourth column takes up the remaining available space (due to the auto value).
Example of fr unit
Single 1fr Column: If you have only one column defined with 1fr, it will take up the entire available width of the grid container. In this case, 1fr would effectively mean full width.
grid-template-columns: 1fr;
Multiple fr Units: When you have multiple columns defined with fr units, each fr unit represents a fraction of the remaining space after accounting for any non-fr defined columns (like fixed-width columns).
For example,
grid-template-columns: 1fr 1fr 1fr;
Here, the grid is divided into three equal columns, each taking up one-third of the available space. Each 1fr column will get an equal share of the available space.
Different fr Values: You can assign different values to the fr units to create columns of different widths.
For example,
grid-template-columns: 1fr 2fr 1fr;
In this example, the second column is twice as wide as the first and third columns. The first and third columns will each take up one part, while the second column takes up two parts of the remaining space.
fr-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
In this example,
· The grid has three columns.
· The first column takes up 1 fraction of the available space.
· The second column takes up 2 fractions of the available space (twice as wide as the first).
· The third column takes up 1 fraction of the available space.
Example with repeat() Function
You can use the repeat() function for repetitive patterns:
grid-template-columns: repeat(3, 1fr);
Here, repeat(3, 1fr) creates three columns, each taking up an equal fraction of the available space.
repeat-demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
Example with minmax() Function
The minmax() function allows you to specify the minimum and maximum size for a column.
grid-template-columns: 1fr minmax(600px, 1fr) 2fr;
· The first column takes up 1 fraction of the available space.
· The second column takes up at least 600 pixels but will grow to a maximum of 1 fraction.
· The third column takes up 2 fractions of the available space.
min-max.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Example</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr minmax(600px, 1fr) 2fr;
gap: 10px;
}
.grid-item {
background-color: lightblue;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
</div>
</body>
</html>
No comments:
Post a Comment