CSS grid-column-end Property

Posted in CSS Tutorial

Updated on Oct 03, 2024

By Mari Selvan

👁️ 17 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The grid-column-end property in CSS is used in grid layouts to determine where a grid item ends on the column axis. It specifies the line where the item should stop, allowing for flexible and complex grid designs.

This property is crucial for placing and spanning elements across multiple columns in a grid container.

💡 Syntax

The syntax for the grid-column-end property is straightforward. It can be applied to any grid item within a grid container.

Syntax

Copied

element {
  grid-column-end: value;
}

🎛️ Default Value

The default value of the grid-column-end property is auto, which means the grid item will span only one column and end at the next column line.

🏠 Property Values

Value	Description
auto	The item will end at the next grid column line.
span <number>	The item will span across the specified number of columns.
<line>	The item will end at the specified grid line number.
<name>	The item will end at the named grid line.

📄 Example

In this example, we'll create a simple grid layout and use the grid-column-end property to make an item span across multiple columns.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS grid-column-end Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
    }
    .grid-item {
      background-color: lightblue;
      padding: 20px;
      text-align: center;
    }
    .item2 {
      grid-column-end: span 3;
    }
  </style>
</head>
<body>
  <h1>Grid Column End Example</h1>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item item2">2 (spans 3 columns)</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>
</body>
</html>

🖥️ Browser Compatibility

The grid-column-end property is supported in all modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. It is always advisable to test your grid layouts across different browsers to ensure consistent rendering.

🎉 Conclusion

The grid-column-end property is an essential part of CSS Grid Layout, allowing developers to control the placement and span of grid items on the column axis.

By mastering this property, you can create flexible and sophisticated grid-based designs. Experiment with different values and combinations to see how this property can enhance your layout designs.