Understanding CSS Grid Columns

In CSS Grid, the grid-column property is used to set the start and end positions of grid items along the horizontal axis. It is used to control the placement of grid items within the grid container.

The grid-column property takes two values: the start and end positions of the grid item along the horizontal axis. The start position is the grid column where the item should start, and the end position is the grid column where the item should end. You can use both integer and non-integer values to specify grid column positions.

The grid-column property can also accept the span keyword, which allows you to span grid items across a certain number of columns.

grid-column-start

The grid-column-start property is used to set the starting position of a grid item within the grid container along the horizontal axis. It specifies the grid column line on which the grid item should start.

You can also use the grid-column-start property with the span keyword to span the grid item across multiple columns.

It's important to note that if you set the grid-column property on a grid item, it will override the grid-column-start property.

grid-column-end

The grid-column-end property is used to set the ending position of a grid item along the horizontal axis within the grid container. It specifies the grid column line on which the grid item should end

You can also use the grid-column-end property with the span keyword to span the grid item across multiple columns.

It's important to note that if you set the grid-column property on a grid item, it will override the grid-column-start and grid-column-end properties.

Here's an example:

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <div class="grid-item box-1">Box-1</div>
    <div class="grid-item box-2">Box-2</div>
    <div class="grid-item box-3">Box-3</div>
    <div class="grid-item box-4">Box-4</div>
    <div class="grid-item box-5">Box-5</div>
    <div class="grid-item box-6">Box-6</div>
    <div class="grid-item box-7">Box-7</div>
    <div class="grid-item box-8">Box-8</div>
    <div class="grid-item box-9">Box-9</div>
  </div>
</body>
</html>

style.css :

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;900&display=swap');

*{
  margin: 0;
  padding: 0;
  font-family: 'Rubik', sans-serif;
  box-sizing: border-box;
}

.container{
  border:5px solid black;
  margin: 20px;
}

.grid-item{
  color:white;
  font-size: 18px;
  padding: 16px;
  text-align: center;
}

.box-1{background-color: #1abc9c;}
.box-2{background-color:#3498db;}
.box-3{background-color: #2ecc71;}
.box-4{background-color: #9b59b6;}
.box-5{background-color:#34495e;}
.box-6{background-color:#2980b9;}
.box-7{background-color:#e74c3c;}
.box-8{background-color: #d35400;}
.box-9{background-color:#2c3e50;}

/**-----------------------------------------------*/

.container{
  display: grid;
  grid-template: repeat(3,200px)/ repeat(3,200px);
}
  

.box-1{
  grid-column-start: 1;
  grid-column-end: 4;
  grid-column-end: span 3;

  grid-column: 1 / span 2;
}

In this code, the .container class is set to be a grid container using display: grid. It has a grid template of three rows, each 200 pixels tall, and three columns, each 200 pixels wide.

This code, the .box-1 class is set to be a grid item. It has a grid-column-start property of 1, which means it will start at the first column of the grid. It also has a grid-column-end property of 4, which means it will end at the fourth column of the grid

However, the grid-column-end property is then overwritten by grid-column-end: span 3;. This means that the .box-1 class will span three columns of the grid, starting at the first column and ending at the third column.

Finally, the grid-column shorthand property is used to set the starting and ending positions of the .box-1 class. It has a starting position of 1 and an ending position of span 2, which means that it will start at the first column and span two columns of the grid.