Grid child Properties

There are some grid properties which is used on grid childs. These properties are :

  • grid-column (combination of grid-column-start and grid-column-end)
  • grid-row (combination of grid-row-start and grid-row-end)
  • align-self
Grid Lines
Before learning grid-column and grid-rows, we need to understand the concept of grid column lines and grid row lines. A quick note is that if number of columns is 3 then total grid column lines is 4 and if number of columns is 4 then total grid column lines is 5 meaning total grid column lines will always be total number of grid columns + 1 .

Same goes for grid row lines, meaning total grid row lines will always be total number of grid rows + 1.
If total number of grid rows is 4 then total grid row lines is 5.
We can understand this visually by seeing the images only as shown below.
grid lines
Grid column and Grid row:

grid-column is a combination of two properties i.e grid-column-start and grid-column-end.
Also grid-row is a combination of two properties i.e grid-row-start and grid-row-end. Now observe the above grid image. In the grid image, we have 12 grid cells representing 12 grid childs.
Now focus on grid child with content as "TWO". It is between grid column line 2 and 3. So grid-column-start is 2 and grid-column-end is 3.
It is also between grid row line 3 and 4. So grid-row-start is 3 and grid-row-end is 4.
Any grid child is always between 2 column lines and 2 column rows..
In the above image, all the grid childs are in their default rows and columns.

We can always change the placement of any grid child by changing the value of grid-columns and grid-rows both. Lets understand below.

Playing with the grid lines:

Now, in the above grid image, we will do some manipulations and put the grid child with content as "TWO" between grid column lines 2 and 3 and grid row lines 1 and 2.
Also we put the grid child with content as "SIX" between grid column lines 3 and 4 and grid row lines 1 and 2. Have a look at this snippet how we achieve this and resultant image also to confirm it below: 

// HTML
<div class="container" >
  <div class="item" >ONE</div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>

  <div class="item" ></div>
  <div class="item b" >TWO</div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item" ></div>
  <div class="item c" >SIX</div>
</div>

//css

.container{
  width: 400px;
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2px;
}

.item{
  width: 1fr;
  height: 80px;
  background: grey;
  display: flex;
  justify-content:center;
  align-items: center;
}

// manupulating grid child with content "TWO"
.b{
  grid-column: 2/3;
  grid-row: 1/2;
}

// manupulating grid child with content "SIX"
.c{
  grid-column: 3/4;
  grid-row: 1/2;
}
Align self:
This property is same as that of flexbox so i will not explain it here as it is done in flexbox page. In short, it is used to reset/manipulate the value of align-items on a specific grid child.

The possible values are : flex-start, flex-end, center, baseline and stretch (all the properties are same as align-items, so i will not explain here).

Note::
For learning to manipulate individual grid child, you need to understand only 3 properties i.e grid-column, grid-row and align-self.
So just follow the formulas and it will be good.

The below properties are rarely used so untill you master css grid like a pro, i suggest you do not go there so i will not explain here also but you always can learn about this from official docs
  • grid-area
  • justify-self
  • align-self
  • place-self
PrevNext