CSS - Creating Layouts with Grid Template Columns and Rows

Creating Layouts with Grid Template Columns and Rows in CSS

Introduction to CSS Grid Layout

CSS Grid Layout is one of the most powerful layout systems available in modern CSS. It allows developers to create complex, responsive, and flexible layouts with ease. Unlike older layout techniques such as floats, tables, or even Flexbox (which is one-dimensional), CSS Grid is a two-dimensional layout system. This means it can control both columns and rows simultaneously, making it ideal for building complete page layouts.

When learning CSS Grid, two of the most important properties you will encounter are grid-template-columns and grid-template-rows. These properties define the structure of the grid by specifying the number, size, and behavior of columns and rows. Understanding these properties deeply is essential for mastering CSS Grid and building professional web layouts.

In this detailed guide, you will learn how to create layouts using grid-template-columns and grid-template-rows, explore different sizing techniques, understand advanced units like fr, and see practical examples that can be applied to real-world projects. This content is designed for learning platforms, ensuring clarity, depth, and practical usefulness.

What Is CSS Grid and Why Use It?

CSS Grid Layout is a layout model that enables developers to design web pages using a grid-based approach. It introduces rows, columns, and cells, allowing content to be placed precisely where it belongs. This system is especially useful for modern web applications, dashboards, landing pages, and complex UI designs.

The main advantages of CSS Grid include:

• True two-dimensional control over layouts
• Cleaner and more readable CSS
• Better responsiveness without excessive media queries
• Easy alignment of elements both horizontally and vertically
• Separation of content structure from visual layout

Understanding Grid Containers and Grid Items

To use CSS Grid, you must first define a grid container. Any element becomes a grid container when its display property is set to grid or inline-grid. All direct children of this container automatically become grid items.

Example: Creating a Basic Grid Container

.container {
    display: grid;
}

Once an element is a grid container, you can start defining columns and rows using grid-template-columns and grid-template-rows.

Understanding grid-template-columns

The grid-template-columns property defines the number and width of columns in a grid layout. Each value represents a column track, and you can use various units such as pixels, percentages, fr units, auto, and more.

Basic Syntax of grid-template-columns

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

In this example, the grid has three columns, each with a fixed width of 200 pixels.

Using Percentages for Columns

Percentages allow columns to be sized relative to the width of the grid container.

.container {
    display: grid;
    grid-template-columns: 50% 25% 25%;
}

This creates a grid with three columns where the first column takes half of the container width and the remaining two share the rest equally.

Using the fr Unit in grid-template-columns

The fr unit, short for fraction, is one of the most important concepts in CSS Grid. It represents a fraction of the available space in the grid container.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

Here, the grid has three columns. The second column is twice as wide as the first and third columns because it uses 2fr.

Understanding grid-template-rows

The grid-template-rows property defines the number and height of rows in a grid layout. Its behavior is very similar to grid-template-columns, but it applies vertically instead of horizontally.

Basic Syntax of grid-template-rows

.container {
    display: grid;
    grid-template-rows: 100px 200px;
}

This creates two rows: the first with a height of 100 pixels and the second with a height of 200 pixels.

Using auto with grid-template-rows

The auto value allows the row height to adjust based on the content inside it.

.container {
    display: grid;
    grid-template-rows: auto auto;
}

This is useful when content height is dynamic and unknown in advance.

Using fr Units for Rows

.container {
    display: grid;
    grid-template-rows: 1fr 3fr;
}

The second row takes up three times more available vertical space than the first row.

Combining grid-template-columns and grid-template-rows

In real-world layouts, you will almost always use grid-template-columns and grid-template-rows together to define a complete grid structure.

Example: Creating a Simple Page Layout

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-rows: auto 1fr auto;
}

This layout is commonly used for websites with a sidebar and main content area, along with a header and footer.

Repeat Function for Grid Templates

The repeat function helps reduce repetition and makes grid definitions cleaner and more readable.

Using repeat with Columns

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

This creates four equal-width columns without writing 1fr four times.

Using repeat with Rows

.container {
    display: grid;
    grid-template-rows: repeat(3, 150px);
}

This defines three rows, each with a height of 150 pixels.

Responsive Layouts with Grid Template Columns and Rows

CSS Grid makes responsive design much easier. By combining grid-template-columns with flexible units and media queries, you can adapt layouts to different screen sizes.

Example: Responsive Grid Layout

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .container {
        grid-template-columns: 1fr;
    }
}

This layout changes from three columns on large screens to one column on small screens.

Using minmax with Grid Templates

The minmax function allows you to define a size range for grid tracks, making layouts more flexible.

Example: minmax with Columns

.container {
    display: grid;
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

Each column will be at least 200 pixels wide but can grow to fill available space.

Common Layout Patterns Using Grid Templates

Dashboard Layout

Dashboards often use multiple rows and columns to organize widgets and panels.

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto 1fr 1fr;
}

Image Gallery Layout

Image galleries benefit from equal-width columns and flexible rows.

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

Common Mistakes to Avoid

• Overusing fixed widths that break responsiveness
• Ignoring content size when defining rows
• Not testing grid behavior on small screens
• Confusing grid-template with grid-auto properties

CSS Grid Layout, especially through the use of grid-template-columns and grid-template-rows, provides a powerful and flexible way to create modern web layouts. By mastering these properties, developers can design complex page structures with minimal code, improved readability, and excellent responsiveness.

For learning platforms and real-world projects alike, understanding grid templates is a foundational skill. With consistent practice and experimentation, CSS Grid can significantly improve the quality and scalability of your web designs.