CSS grid-template-columns

The grid-template-columns property in CSS is used to define the number and size of the columns in a grid layout. It allows you to create a layout with multiple columns of varying widths.

To use the grid-template-columns property, you can specify the width of each column using values such as px, em, rem, or percentages. You can also use the fr unit to create columns that take up an equal amount of available space.

Here is an example of how you can use the grid-template-columns property:

Result:

Column 1

Column 2

In this example, we have a grid layout with two columns. The first column takes up one fraction of the available space (1fr), while the second column takes up two fractions of the available space (2fr).

You can also specify the width of each column using specific values. For example:

Result:

Column 1 (100px)

Column 2 (200px)

In this example, the first column is 100 pixels wide, while the second column is 200 pixels wide.

The grid-template-columns property is flexible and allows for a wide range of layout possibilities. By experimenting with different values and units, you can create complex grid layouts that suit your design needs.