Understanding the grid-column Property

The CSS grid-column property is a powerful tool for creating complex and flexible grid layouts. It allows you to specify the size and location of a grid item by setting its starting and ending column lines. This shorthand property combines grid-column-start and grid-column-end, making it easy to control grid items.

Specification

The grid-column property is part of the CSS Grid Layout Module Level 2. This module provides tools for creating intricate and responsive grid layouts. The grid-column property simplifies the process of setting both the starting and ending column lines of a grid item with a single declaration.

Description

The CSS grid-column property is a shorthand property that specifies the size and location of a grid item within a grid container. It allows you to define both the starting and ending column lines of a grid item, making it easier to control the placement and span of elements in your grid layout.

Wide Compatibility

The CSS grid-column property is widely supported across many devices and browser versions, making it a reliable choice for web developers. Introduced in July 2020, this feature has become well-established and works seamlessly across various platforms.

Constituent Properties

The CSS grid-column property is a shorthand that combines the functionalities of two other CSS properties:

1. grid-column-start: This property specifies the starting line of a grid item’s column. It defines where the grid item begins within the grid container.
2. grid-column-end: This property specifies the ending line of a grid item’s column. It defines where the grid item ends within the grid container.

By using the grid-column property, you can set both the starting and ending column lines of a grid item with a single declaration. For example, instead of writing:

grid-column-start: 1;
grid-column-end: 4;

You can simply use:

grid-column: 1 / 4;

This shorthand notation reduces the amount of code and improves readability, making it easier to manage your grid layouts.

Syntax

The CSS grid-column property follows a straightforward syntax that allows you to specify the starting and ending column lines of a grid item. The basic syntax is as follows:

grid-column: grid-column-start / grid-column-end;

Here is a detailed breakdown of the syntax:

• Keyword values:

  grid-column: auto;
  grid-column: auto / auto;

• Custom identifiers:

  grid-column: somegridarea;
  grid-column: somegridarea / someothergridarea;

• Integer values:

  grid-column: somegridarea 4;
  grid-column: 4 somegridarea / 6;

• Span with integer or custom identifiers:

  grid-column: span 3;
  grid-column: span somegridarea;
  grid-column: 5 somegridarea span;
  grid-column: span 3 / 6;
  grid-column: span somegridarea / span someothergridarea;
  grid-column: 5 somegridarea span / 2 span;

• Global values:

  grid-column: inherit;
  grid-column: initial;
  grid-column: revert;
  grid-column: revert-layer;
  grid-column: unset;

The grid-column property can be specified using one or two <grid-line> values. If two values are provided, they are separated by a /. The first value sets the starting column line (grid-column-start), and the second value sets the ending column line (grid-column-end).

Each <grid-line> value can be specified in several ways:

• auto keyword: Indicates that the property contributes nothing to the grid item’s placement, allowing automatic placement, span, or default settings.
• Custom identifier (<custom-ident>): If there is a named line with the name <custom-ident>-start/<custom-ident>-end, it contributes the corresponding line to the grid item’s placement.
• Integer value: Specifies the nth grid line to the grid item’s placement. If a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid.
• span keyword with integer or custom identifier: Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge.

Values

The CSS grid-column property accepts a variety of values that allow you to define the starting and ending column lines of a grid item. These values provide the flexibility to control the placement and span of grid items in a grid layout. Here are the different types of values that can be used with the grid-column property:

1. auto
   • Description: The auto keyword indicates that the property contributes nothing to the grid item’s placement, allowing for automatic placement, span, or a default span of 1.
   • Example:

     grid-column: auto;
     grid-column: auto / auto;

2. <custom-ident>
   • Description: If there is a named line with the name <custom-ident>-start/<custom-ident>-end, it contributes the corresponding line to the grid item’s placement. If no such named line exists, it is treated as if the integer 1 had been specified along with the <custom-ident>.
   • Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-column: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).
   • Example:

     grid-column: somegridarea;
     grid-column: somegridarea / someothergridarea;

3. <integer> && <custom-ident>?
   • Description: Specifies the nth grid line to the grid item’s placement. If a negative integer is given, it counts in reverse, starting from the end edge of the explicit grid. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.
   • Example:

     grid-column: somegridarea 4;
     grid-column: 4 somegridarea / 6;

4. span && [ <integer> || <custom-ident> ]
   • Description: Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. If a name is given as a <custom-ident>, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span. If the <integer> is omitted, it defaults to 1. Negative integers or 0 are invalid.
   • Example:

     grid-column: span 3;
     grid-column: span somegridarea;
     grid-column: 5 somegridarea span;
     grid-column: span 3 / 6;
     grid-column: span somegridarea / span someothergridarea;
     grid-column: 5 somegridarea span / 2 span;

5. Global Values
   • Description: These values apply globally and can be used to reset or inherit styles.
   • Example:

     grid-column: inherit;
     grid-column: initial;
     grid-column: revert;
     grid-column: revert-layer;
     grid-column: unset;

Formal Definition

The grid-column property in CSS is formally defined as a shorthand property that combines the functionalities of grid-column-start and grid-column-end. This property allows you to specify the starting and ending column lines of a grid item within a grid container, providing precise control over the grid layout.

Initial Value:

• The initial value for grid-column is set to auto for both grid-column-start and grid-column-end. This means that by default, grid items will be placed automatically within the grid container.

Applies To:

• The grid-column property applies to grid items and absolutely-positioned boxes whose containing block is a grid container. This ensures that the property is only effective within the context of a grid layout.

Inherited:

• The grid-column property is not inherited. This means that the property values are not automatically applied to child elements unless explicitly specified.

Computed Value:

• The computed value for grid-column is determined as specified for each of the shorthand properties: grid-column-start and grid-column-end. This ensures that the computed values reflect the specified starting and ending column lines accurately.

Animation Type:

• The grid-column property is not animatable. This means that the property cannot be used in CSS animations or transitions.

Formal Syntax

The CSS grid-column property follows a specific formal syntax that defines how to specify the starting and ending column lines of a grid item. The syntax is structured to allow for various combinations of values, providing flexibility in defining the grid layout.

Here is the formal syntax for the grid-column property:

grid-column: <grid-line> [ / <grid-line> ]?;

The syntax can be broken down as follows:

• Keyword values:

  grid-column: auto;
  grid-column: auto / auto;

• Custom identifiers:

  grid-column: somegridarea;
  grid-column: somegridarea / someothergridarea;

• Integer values:

  grid-column: somegridarea 4;
  grid-column: 4 somegridarea / 6;

• Span with integer or custom identifiers:

  grid-column: span 3;
  grid-column: span somegridarea;
  grid-column: 5 somegridarea span;
  grid-column: span 3 / 6;
  grid-column: span somegridarea / span someothergridarea;
  grid-column: 5 somegridarea span / 2 span;

• Global values:

  grid-column: inherit;
  grid-column: initial;
  grid-column: revert;
  grid-column: revert-layer;
  grid-column: unset;

Examples

Example 1: Basic Usage

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-column: 1 / 3;
}

.item2 {
  background-color: yellow;
  grid-column: 3 / 4;
}

.item3 {
  background-color: blue;
}

Explanation:

• The .grid-container has three columns.
• .item1 spans from the first column line to the third column line.
• .item2 spans from the third column line to the fourth column line.
• .item3 takes the default placement.

Example 2: Using span

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-column: span 2;
}

.item2 {
  background-color: yellow;
  grid-column: 3 / span 2;
}

.item3 {
  background-color: blue;
}

Explanation:

• The .grid-container has four columns.
• .item1 spans two columns starting from its default position.
• .item2 starts from the third column line and spans two columns.
• .item3 takes the default placement.

Example 3: Using Named Grid Lines

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end] 1fr;
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-column: start / middle;
}

.item2 {
  background-color: yellow;
  grid-column: middle / end;
}

.item3 {
  background-color: blue;
  grid-column: end / 4;
}

Explanation:

• The .grid-container has three columns named start, middle, and end.
• .item1 spans from the start line to the middle line.
• .item2 spans from the middle line to the end line.
• .item3 spans from the end line to the fourth column line.

Example 4: Using Named Grid Areas

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-area: header;
}

.item2 {
  background-color: yellow;
  grid-area: sidebar;
}

.item3 {
  background-color: blue;
  grid-area: main;
}

Explanation:

• The .grid-container uses named grid areas.
• .item1 spans the header area.
• .item2 spans the sidebar area.
• .item3 spans the main area.

Example 5: Spanning Multiple Columns with span

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-column: span 3;
}

.item2 {
  background-color: yellow;
  grid-column: 4 / span 2;
}

.item3 {
  background-color: blue;
}

Explanation:

• The .grid-container has six columns.
• .item1 spans three columns starting from its default position.
• .item2 starts from the fourth column line and spans two columns.
• .item3 takes the default placement.

Example 6: Combining span and Named Grid Lines

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end] 1fr;
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-column: start / span middle;
}

.item2 {
  background-color: yellow;
  grid-column: middle / span end;
}

.item3 {
  background-color: blue;
  grid-column: end / span 1;
}

Explanation:

• The .grid-container has three columns named start, middle, and end.
• .item1 spans from the start line to the middle line.
• .item2 spans from the middle line to the end line.
• .item3 spans one column starting from the end line.

Example 7: Using auto Keyword

HTML:

<div class="grid-container">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  padding: 10px;
  background-color: lightgray;
}

.item1 {
  background-color: lime;
  grid-column: auto / span 2;
}

.item2 {
  background-color: yellow;
  grid-column: auto / span 1;
}

.item3 {
  background-color: blue;
  grid-column: auto;
}

Explanation:

• The .grid-container has three columns.
• .item1 spans two columns starting from its default position.
• .item2 spans one column starting from its default position.
• .item3 takes the default placement.

Conclusion

The CSS grid-column property is a powerful tool for creating flexible and responsive grid layouts. By mastering this property, you can create complex and dynamic designs that look great on any device.

Browser Support

The CSS grid-column property is widely supported across modern web browsers, ensuring your layouts work consistently across different platforms. Here’s an overview:

• Google Chrome: Supported since Chrome 57.
• Mozilla Firefox: Supported since Firefox 52.
• Microsoft Edge: Supported since Edge 16.
• Opera: Supported since Opera 44.
• Safari: Supported since Safari 10.

This broad support means your grid layouts will display correctly on most modern browsers, enhancing user experience and accessibility.

You May Also Like

For more info on CSS Grid and related properties, check out these resources:

• CSS grid-row Property Reference: Learn about the grid-row property, which works similarly to grid-column but for rows.
• CSS grid-row-start Property Reference: Understand how to set the starting row line for a grid item.
• CSS grid-row-end Property Reference: Learn how to specify the ending row line for a grid item.
• CSS grid-column-start Property Reference: Explore how to set the starting column line for a grid item.
• CSS grid-column-end Property Reference: Learn how to define the ending column line for a grid item.
• Line-based Placement with CSS Grid: Dive into line-based placement for precise grid item placement.
• Video: Line-based Placement: Watch a tutorial on effective line-based placement in CSS Grid.

These resources will help you master CSS Grid and create stunning, responsive layouts.