rick@tillitsdone.com

+66824564755

Scroll to discover

Mastering CSS grid-column-end for Flexible Layouts

The CSS grid-column-end property defines the end position of a grid item within a column.

It's crucial for precise control over layouts.

Available options include auto, custom identifiers, integers, and spans.

Introduction

The grid-column-end property in CSS is a powerful tool for web developers. It defines where a grid item ends within a column, helping you control the layout of your grid. This property is widely supported and has been available since July 2020. It’s essential for creating complex and responsive designs.

Baseline Widely Available

The grid-column-end property is widely supported across devices and browsers. Since its introduction in July 2020, it has become a key tool for web developers. This broad compatibility ensures your grid layouts work smoothly across different platforms.

Overview of grid-column-end

The grid-column-end property in CSS specifies where a grid item ends within a column. It’s part of the CSS Grid Layout module and helps determine the placement of items within a grid container. By defining the end position, you can control the layout precisely.

Syntax

The grid-column-end syntax is straightforward and allows for flexible control over the layout:

grid-column-end: auto | <custom-ident> | <integer> | span <integer> | <custom-ident> <integer> | span <custom-ident>;

Values

auto: Uses default grid placement rules.
<custom-ident>: Uses a named grid line.
<integer>: Specifies the nth grid line. Negative values count from the end.
span <integer>: Defines a span of n grid lines.

Global Values

inherit, initial, revert, revert-layer, unset: These values allow you to inherit, reset, or unset the property.

Example Usage

Here’s how you can use grid-column-end:

/* Keyword value */
grid-column-end: auto;

/* Custom identifier value */
grid-column-end: somegridarea;

/* Integer value */
grid-column-end: 2;

/* Span with integer value */
grid-column-end: span 3;

/* Global values */
grid-column-end: inherit;
grid-column-end: initial;
grid-column-end: revert;
grid-column-end: revert-layer;
grid-column-end: unset;

Formal Definition

The grid-column-end property specifies the end position of a grid item within a column. It helps determine the block-end edge of a grid area by contributing a line, a span, or nothing (automatic) to the item’s grid placement.

Initial Value: auto
Applies to: Grid items and absolutely-positioned boxes within a grid container
Inherited: No
Computed Value: As specified
Animation Type: Discrete

Formal Syntax

grid-column-end = <grid-line>;

<grid-line> = auto | <custom-ident> | [<integer>] [<custom-ident>]? | span [<integer> || <custom-ident>];

Syntax Breakdown

auto: Uses default grid placement rules.
<custom-ident>: Uses a named grid line.
[<integer>]: Specifies the nth grid line. Negative values count from the end.
[<custom-ident>]?: Optionally specifies a custom identifier to count only lines with that name.
span [<integer> || <custom-ident>]: Defines a grid span of n lines from the start edge.

Examples

HTML

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
  <div class="box4">Four</div>
  <div class="box5">Five</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.box2 {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-row-end: 5;
}

Example: Using `grid-column-end: auto;`

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-column-end Property</title>
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: auto;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>
</html>

Example: Using `grid-column-end: span 3;`

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-column-end Property</title>
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: span 3;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>
</html>

Example: Using `grid-column-end: 3;`

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-column-end Property</title>
    <style>
        .main {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: 3;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>
</html>

Example: Using `grid-column-end` with Named Grid Lines

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-column-end Property</title>
    <style>
        .main {
            display: grid;
            grid-template-columns: [start] 1fr [middle] 1fr [end] 1fr;
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: end;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>
</html>

Example: Using `grid-column-end` with Negative Integers

HTML

<!DOCTYPE html>
<html>
<head>
    <title>CSS grid-column-end Property</title>
    <style>
        .main {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 20px;
            padding: 30px;
            background-color: green;
        }

        .GFG {
            text-align: center;
            font-size: 35px;
            background-color: white;
            padding: 20px 0;
        }

        .Geeks1 {
            grid-column-end: -2;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="Geeks1 GFG">1</div>
        <div class="Geeks2 GFG">2</div>
        <div class="Geeks3 GFG">3</div>
        <div class="Geeks4 GFG">4</div>
        <div class="Geeks5 GFG">5</div>
    </div>
</body>
</html>

These examples show how versatile the grid-column-end property is. By understanding and using these examples, you can effectively create sophisticated and responsive grid layouts in your web development projects.

Specifications

The grid-column-end property is defined in the CSS Grid Layout Module Level 2 specification. This specification outlines the standard for grid layouts in CSS, including the use of grid-column-end to control the end position of grid items.

Specification: CSS Grid Layout Module Level 2 - line-placement

Browser Compatibility

The grid-column-end property is widely supported across modern web browsers, ensuring that your grid layouts will function consistently across different platforms and devices. Here is a summary of the browser compatibility for the grid-column-end property:

Google Chrome: Supported since version 57 (March 2017)
Mozilla Firefox: Supported since version 52 (March 2017)
Microsoft Edge: Supported since version 16 (September 2017)
Opera: Supported since version 44 (March 2017)
Safari: Supported since version 10 (September 2016)

Browser Compatibility Table

Browser	Version	Release Date
Google Chrome	57	March 2017
Mozilla Firefox	52	March 2017
Microsoft Edge	16	September 2017
Opera	44	March 2017
Safari	10	September 2016

This broad compatibility ensures that your grid layouts will work seamlessly across various devices and browsers, providing a consistent user experience.

For the most up-to-date information on browser compatibility, you can refer to the Browser Compatibility Data.

By leveraging the grid-column-end property in your web development projects, you can create sophisticated and responsive grid layouts that are compatible with the latest web standards and provide a seamless experience for users across different platforms.

FAQs

Here are some frequently asked questions about the grid-column-end property in CSS:

What does the `grid-column-end` property do in CSS?

The grid-column-end property specifies the ending position of a grid item within a grid column. It determines the column line where a grid item should stop, effectively controlling how many columns the item spans. This property is crucial for precise control over the layout of grid items.

How can I make an item stop at a specific column line?

You can set grid-column-end to a specific line number like this:

grid-column-end: 4;

This makes the item end at the 4th grid line.

What is the difference between `grid-column-start` and `grid-column-end`?

grid-column-start: Sets the beginning of a grid item’s span within the grid column.
grid-column-end: Sets where the grid item stops within the grid column, effectively defining the total span of the item across the grid’s columns.

Together, these properties define the total span of an item across the grid’s columns.

Can I use `grid-column-end` with `span` to control column span?

Yes, you can use span with grid-column-end, for example:

grid-column-end: span 3;

This makes the item span 3 columns from its starting position.

How does `grid-column-end` interact with `grid-template-columns`?

The grid-column-end property works in relation to the grid-template-columns property. It respects the widths and sizes defined for each column when determining where an item stops. This interaction ensures that the grid layout is consistent and well-structured.

What happens if I use `grid-column-end: auto`?

Using grid-column-end: auto means the grid item will follow the default grid placement rules, allowing for auto-placement, an automatic span, or a default span of 1. This is useful when you want the grid to handle the placement automatically.

Can I use `grid-column-end` with named grid lines?

Yes, you can use grid-column-end with named grid lines. For example:

grid-column-end: somegridarea;

This makes the item end at the named grid line somegridarea. If no such line exists, it defaults to the integer 1.

Is `grid-column-end` widely supported across browsers?

Yes, grid-column-end is widely supported across modern browsers, including Google Chrome, Mozilla Firefox, Microsoft Edge, Opera, and Safari. This ensures that your grid layouts will function consistently across different platforms and devices.

How do I use `grid-column-end` effectively in my projects?

To use grid-column-end effectively:

Understand the Syntax: Familiarize yourself with the various values (auto, <custom-ident>, <integer>, span <integer>) and how they control the end position of a grid item.
Experiment with Values: Try different values to see how they affect the layout. This will help you understand how to achieve the desired positioning.
Combine with Other Properties: Use grid-column-end in conjunction with other grid properties like grid-column-start, grid-row-start, and grid-row-end to create complex and responsive layouts.
Use Named Grid Lines: Naming your grid lines can make your CSS more readable and easier to maintain.

By understanding these FAQs, you can effectively use the grid-column-end property in your web development projects to create sophisticated and responsive grid layouts.

CSS Blogs

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

CSS property CSS animation

css_property_cover/css-property-grid.png

CSS Grid A Powerful Layout Tool for Web Design CSS Grid is a powerful layout system for web developers. Create complex web pages easily with rows, columns, and named areas. Explore compatibility, syntax, and examples.

css_property_cover/css-property-place-self.png

CSS Place-Self Simplified Guide for Alignment The CSS place-self property is a powerful tool for aligning individual items in grid and flexbox layouts. It combines align-self and justify-self properties, offering options like auto, normal, stretch, start, end, center, and more.

css_property_cover/css-property-align-items.png

CSS align-items A Comprehensive Guide CSS align-items is a powerful property for aligning flex and grid items. Learn how to use it with options like center, start, end, and stretch. Enhance your web design skills with practical examples and browser compatibility details.

css_property_cover/css-property-align-self.png

CSS align-self Master Flexbox & Grid Alignment Learn how to use the CSS align-self property to control the alignment of individual flex and grid items. Explore available options like auto, center, flex-start, and more.

css_property_cover/css-property-background-position-y.png

CSS background-position-y Vertical Image Positioning Learn how to use CSS background-position-y to control the vertical position of background images. Explore keyword, percentage, and length values for precise positioning.

css_property_cover/css-property-grid-row-end.png

CSS grid-row-end Mastering Vertical Grid Layout Learn to control vertical grid layouts using the CSS grid-row-end property. Explore its use cases, available options, and compatibility with modern browsers.

View all 337 CSS blogs

Talk with CEO

Ready to bring your web/app to life or boost your team with expert Thai developers?

Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!

🖐️ Contact us

Explore our best articles, cover a wide variety of technologies

Our knowledge base

UI toolkit for building natively compiled applications for mobile, web, and desktop from a single codebase.

150 Articles

Explore

Nodejs

JavaScript runtime for building scalable, high-performance server-side applications.

60 Articles

Explore

Nextjs

React framework enabling server-side rendering and static site generation for optimized performance.

40 Articles

Explore

Typescript

Superset of JavaScript adding static types for improved code quality and maintainability.

39 Articles

Explore

TailwindCSS

Utility-first CSS framework for rapid UI development.

130 Articles

Explore

Golang

Programming language known for its simplicity, concurrency model, and performance.

70 Articles

Explore

AstroJs

Astro is an all-in-one web framework. It includes everything you need to create a website, built-in.

40 Articles

Explore

Jest

Versatile testing framework for JavaScript applications supporting various test types.

337 Articles

Explore

CSS

CSS3 is the latest version of Cascading Style Sheets, offering advanced styling features like animations, transitions, shadows, gradients, and responsive design.

Let's keep in Touch

Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.

Contact Information

rick@tillitsdone.com+66824564755

Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.

Address

9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand

Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.

Social media

Facebook Instagram LinkedIn

Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.

We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.

DesignRush
web design companies

Goodfirms

Mastering CSS grid-column-end for Flexible Layouts

Introduction

Baseline Widely Available

Overview of grid-column-end

Syntax

Values

Global Values

Example Usage

Formal Definition

Formal Syntax

Syntax Breakdown

Examples

HTML

CSS

Example: Using grid-column-end: auto;

HTML

Example: Using grid-column-end: span 3;

HTML

Example: Using grid-column-end: 3;

HTML

Example: Using grid-column-end with Named Grid Lines

HTML

Example: Using grid-column-end with Negative Integers

HTML

Specifications

Browser Compatibility

Browser Compatibility Table

See Also

FAQs

What does the grid-column-end property do in CSS?

How can I make an item stop at a specific column line?

What is the difference between grid-column-start and grid-column-end?

Can I use grid-column-end with span to control column span?

How does grid-column-end interact with grid-template-columns?

What happens if I use grid-column-end: auto?

Can I use grid-column-end with named grid lines?

Is grid-column-end widely supported across browsers?

How do I use grid-column-end effectively in my projects?

Talk with CEO

Example: Using `grid-column-end: auto;`

Example: Using `grid-column-end: span 3;`

Example: Using `grid-column-end: 3;`

Example: Using `grid-column-end` with Named Grid Lines

Example: Using `grid-column-end` with Negative Integers

What does the `grid-column-end` property do in CSS?

What is the difference between `grid-column-start` and `grid-column-end`?

Can I use `grid-column-end` with `span` to control column span?

How does `grid-column-end` interact with `grid-template-columns`?

What happens if I use `grid-column-end: auto`?

Can I use `grid-column-end` with named grid lines?

Is `grid-column-end` widely supported across browsers?

How do I use `grid-column-end` effectively in my projects?