The grid-template-columnsproperty is just a small part of CSS Grid. To understand this property specifically, you first need to understand what a CSS grid is.
To speed you up, Grid Layout basically provides a grid-based layout system. To design a page or template, you can use rows and columns instead of using something like float: right;. In this article, we will explore grid-template-columns in CSS to understand what it is and how to best use it. let's start!
What are grid-template-columns?
Simply put, grid-template-columns is a property that specifies the number of columns in a grid layout as well as the width of said columns . The values of this property are separated by spaces, and each value specifies the size of its respective column:
grid-template-columns: auto auto auto; grid-template-columns: auto auto; grid-template-columns: 20% 20% 20% 20%;
The above line is a basic demonstration of how to use grid-template-columns. Their three auto-separated values represent three columns with the same width. The following two also apply to auto values. How to fix "This account is not allowed to use WhatsApp" issue As for the four 20% values, the width of the column will be 20% of the parent element.
The syntax is very simple, but there are many more values than just percentage and auto. Consider the following code:
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
Each value separated by a pipe is a possible value that you can use with the grid-template-columns property. Each has its own purpose, which we will discuss later in this article.
It's also important to understand that this property is animatable. grid-template-columns can be used for animations and transitions, meaning columns can gradually change from one value to another:
<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-gap: 10px;
background-color: black;
padding: 10px;
animation: mymove 5s infinite;
border-radius: 2vw;
}
.grid-container > div {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 1.5vw;
}
@keyframes mymove {
20% {grid-template-columns: auto}
40% {grid-template-columns: auto auto}
50% {grid-template-columns: auto auto auto;}
60% {grid-template-columns: auto auto}
80% {grid-template-columns: auto}
}
</style>
</head>
<body>
<h1>Animation of the grid-template-columns Property</h1>
<p>The animation will change the number of columns from 1 to 3 then back to 1 and finally the original 4. on repeat </p>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
</body>
</html>
This is just a simple demonstration of how to measure distance in Google Maps (desktop and mobile) showing how to use this property for animations and transitions.
Understand values
Let's go back to the following line:
grid-template-columns: none|auto|max-content|min-content|length|initial|inherit;
We'll look at each value so you understand what's going on with the columns in your layout. First, we'll get initial and inherit because they're not that interesting for this particular property. initial simply sets the grid-template-columns property to its default value, which in this case is just none. This inheritvalue basically inherits whatever value the property has on its parent element.
none is the default value for generating columns when needed, with widths evaluated based on the size of the container and the size of the content within the column.
max-content adjusts the column width based on the largest item in the column. min-content adjusts the column width based on the smallest item in the column. length sets the given value to the width of the column.
Using the code below as my simple HTML, how to fix "Spotify can't play this content right now" error in Windows I will adjust the CSS for each value of the property:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>The grid-template-columns property</h1>
<div id="test-div">
<div class="item1">First</div>
<div class="item2">Second</div>
<div class="item3">Third</div>
<div class="item4">Fourth</div>
<div class="item5">Fifth</div>
<div class="item6">Sixth</div>
</div>
</body>
</html>
none
Up to that point none, no clear grid. Basically the columns are sized either to take full width or determined by another property, grid-auto-columns. How to check your Google Maps timeline on Android and iPhone The code below shows the none attribute and how it operates on the output:
body {
background-color: white;
padding: 10vw;
}
#test-div {
height: auto;
display: grid;
border-radius: 1vw;
gap: 1vw;
background-color: black;
padding: 1vw;
grid-template-columns: none;
}
#test-div div {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 0.5vw;
}
Here is the output:
auto
When you have auto as the value of the attribute, it just divides the entire width by the number of columns you have. Each has the same width. In the code below, note that the grid-template-columns property uses auto three times. So you will have three columns of the same width:
body {
background-color: white;
padding: 10vw;
}
#test-div {
height: auto;
display: grid;
border-radius: 1vw;
gap: 1vw;
background-color: black;
padding: 1vw;
grid-template-columns: auto auto auto;
}
#test-div div {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 0.5vw;
}
The output is as follows:
With the auto value you can go a little deeper. If you have other values for this property, for example, grid-template-columns: auto 3px auto 50px;, the UI will have four columns. The first will have the same width as the third, while the second and fourth will have uniquely specified widths. Now, this should tell you that auto takes any available space and distributes it evenly to any column with said value.
max-content
max-content requires a bit of HTML tweaking, as it will take the width of the largest content. The code below shows six different divs with some random content. As with the previous example, your grid-template-columns property will determine the number of columns you get:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>The grid-template-columns property</h1>
<div id="test-div">
<div class="item1">First</div>
<div class="item2">Second</div>
<div class="item3">blah blah blah</div>
<div class="item4">Fourth</div>
<div class="item5">Fifth</div>
<div class="item6">Sixth</div>
</div>
</body>
</html>
In this code, grid-template-columns: max-content max-content max-content; results in three columns. That being said, even if they have the same value, the width of the column will be determined by the span of the content in the div. Therefore, the content inside determines the width of the div:
body {
background-color: white;
padding: 10vw;
}
#test-div {
height: auto;
display: grid;
border-radius: 1vw;
gap: 1vw;
background-color: black;
padding: 1vw;
grid-template-columns: max-content max-content max-content;
}
#test-div div {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 0.5vw;
}
The output is as follows:
Please note that blah blah blah is the largest content, therefore, it determines the width of the three columns. The same concept applies to min-content values. However, the problem is that you will encounter some overflow.
length
length does not mean literally, length. Interesting Notes - Share valuable tutorials! length basically represents the actual value given in CSS. These include any and all CSS units you might want to use; they all apply regardless of whether you use vw, rem, em, fr, etc. Each column value defined will be reflected in your UI:
body {
background-color: white;
padding: 10vw;
}
#test-div {
height: auto;
display: grid;
border-radius: 1vw;
gap: 1vw;
background-color: black;
padding: 1vw;
grid-template-columns: 10vw 25vw 40vw;
}
#test-div div {
background-color: white;
text-align: center;
padding: 20px 0;
font-size: 30px;
border-radius: 0.5vw;
}
The above code will give the first column a width of 10vw, the second a width of 25vw and the third a width of 40vw. The output looks like this:
You can use these values together or uniformly. As a designer, you have freedom. Take your time, give these values a try, and remember to have fun.
generalize
Like I said at the beginning of this article, grid-template-columns is just one aspect of the overall grid system. In this article, we learned how to use none, auto, max-content, min-content, and length values.
If this excites you, then you can dive into everything that comes with the display: line in gridCSS. The possibilities are endless. Happy coding!