CSS grid-template-columns Property

The grid-template-columns CSS property is used to specify the number of columns and the size of the grid's columns. This property accepts multiple values. The number of columns is determined by how many values are assigned to this property.

Syntax

grid-template-columns: none | auto | max-content | min-content | length | initial | inherit;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 12px;
        background-color: #00ab55;
        padding: 12px;
    }
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.6);
        text-align: center;
        padding: 12px 0;
    }
</style>
</head>
<body>

<div class="grid-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
none	The default value. Columns are added as needed.
auto	The size of the columns is determined by the container size as well as the size of the items in the column.
max-content	The size of each column is set to be determined by the largest item in the column.
min-content	Sets the size of each column to be determined by the column's smallest item.
length	Sets the column size by using a legal length value. Learn more about length units.
initial	This property is set to its default value.
inherit	This property is inherited from its parent element.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
grid-template-columns	57.0	52.0	10.0	16.0	44.0

grid-template-areas

grid-template-rows

CSS grid-template-columns Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us