CSS grid-column Property

Grid is a two-dimensional (two-dimensional) design pattern for dealing with grid-based user interfaces on the web. It describes the various properties that can be used to design grid structures and control grid item placement using CSS.

It can change the layout of grid items regardless of their source order, allowing grid items to be moved around to accommodate these varying contexts without modifying the underlying markup.

Syntax

grid-column: grid-column-start | grid-column-end;

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 12px;
        background-color: #00ab55;
        padding: 12px;
    }
    .grid-container > div {
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        padding: 12px 0;
    }
    .box1 {
        grid-column: 1 / span 2;
    }
</style>
</head>
<body>

<div class="grid-container">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
    <div class="box6">6</div>
    <div class="box7">7</div>
</div>

</body>
</html>

Preview

Property Values

Value	Description
grid-column-start	Specifies which column the item should be displayed in.
grid-column-end	Specifies where to stop displaying the item or how many columns to span.

Supported Browsers

Property	Chrome	Firefox	Safari	Edge / IE	Opera
grid-column	57.0	52.0	10.0	16.0	44.0

grid-auto-rows

grid-column-end

CSS grid-column Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us