Tillitsdone
down Scroll to discover
CSS grid-column-start A Comprehensive Guide
The CSS grid-column-start property specifies the starting column line for a grid item.

It allows for flexible and responsive layouts by defining the block-start edge of the grid area.

Options include auto, custom identifiers, integers, and span values.
thumbnail

Introduction

The grid-column-start property in CSS helps you control where a grid item starts within a grid layout. It’s a powerful tool for web developers, allowing for precise and flexible layout designs.

Definition

The grid-column-start property defines the starting position of a grid item within a grid column. It can specify a line, a span, or use automatic placement. This property is essential for creating flexible and responsive grid layouts.

Syntax

Here’s how to use the grid-column-start property in CSS:

/* Keyword value */
grid-column-start: auto;
/* Custom identifier value */
grid-column-start: somegridarea;
/* Integer value */
grid-column-start: 2;
grid-column-start: somegridarea 4;
/* Span value */
grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: span somegridarea 5;
/* Global values */
grid-column-start: inherit;
grid-column-start: initial;
grid-column-start: revert;
grid-column-start: revert-layer;
grid-column-start: unset;

Values

The grid-column-start property can take several values:

auto

The default value, indicating automatic placement.

grid-column-start: auto;

<custom-ident>

Specifies a named line within the grid.

grid-column-start: somegridarea;

<integer> && <custom-ident>?

Specifies a specific grid line, optionally with a custom identifier.

grid-column-start: 2;
grid-column-start: somegridarea 4;

An <integer> value of 0 is invalid.

span && [ <integer> || <custom-ident> ]

Defines a span across multiple columns.

grid-column-start: span 3;
grid-column-start: span somegridarea;
grid-column-start: span somegridarea 5;

If the <integer> is omitted, it defaults to 1. Negative integers and 0 are invalid.

Formal Definition

Here is a formal definition of the grid-column-start property:

Initial valueauto
Applies toGrid items and absolutely-positioned boxes within a grid container
InheritedNo
Computed valueAs specified
Animation typeDiscrete

Formal Syntax

grid-column-start = <grid-line>
<grid-line> =
auto |
<custom-ident> |
[ <integer [-∞,-1]> | <integer [1,]> ] [ && <custom-ident>? ] |
span [ && [ <integer [1,]> || <custom-ident> ] ]

Examples

Setting Column Start for a Grid Item

HTML
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</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;
}

Using Named Lines with grid-column-start

HTML
<div class="wrapper">
<div class="box1">One</div>
<div class="box2">Two</div>
<div class="box3">Three</div>
</div>
CSS
.wrapper {
display: grid;
grid-template-columns: [start] 1fr [middle] 1fr [end] 1fr;
grid-auto-rows: 100px;
}
.box1 {
grid-column: start;
background-color: lightblue;
}
.box2 {
grid-column: middle;
background-color: lightcoral;
}
.box3 {
grid-column: end;
background-color: lightgreen;
}

Specifications

Specification
CSS Grid Layout Module Level 2 # line-placement

Browser Compatibility

The grid-column-start property is widely supported across many devices and browser versions. This ensures your grid layouts work consistently across different platforms and browsers.

Browser Compatibility Summary

  • 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.1 (September 2016).

FAQs

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

The grid-column-start property specifies the starting grid line for a grid item, determining where the item should begin within the grid container.

How do I position an item at a specific column line?

You can set grid-column-start to a specific line number like this: grid-column-start: 2; which positions the item starting at the 2nd grid line.

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

grid-column-start sets where the item begins horizontally, while grid-column-end specifies where it stops. Together, they define how much space the item spans across the grid.

Can I use span with grid-column-start?

No, span is typically used with grid-column-end to define the span across multiple columns. grid-column-start only sets the starting position.

How does grid-column-start relate to grid-template-columns?

grid-column-start respects the column structure defined by grid-template-columns, ensuring that items align according to the sizes and positions specified in the grid template.

By understanding and utilizing the grid-column-start property, developers can create sophisticated and responsive web designs that perform well across a range of devices and browsers. This baseline availability makes grid-column-start an essential tool for any web development project.

Get 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
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.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.