CSS3 Grid Child Properties

Next ❯Grid Functions

Child properties are used to style the grid-items

  • turned_in_notGrid Child properties
    • grid-column-start
    • grid-column-end
    • grid-column
    • grid-row-start
    • grid-row-end
    • grid-row
    • grid-area

You should know first :

1
2
3
4
5
6
7
8
9

Message : Try, to see comments !

Try :
Column LinesRow Lines

You can also name the lines when declaring grid-template or grid-template-columns or grid-template-rows

/*Syntax*/
grid-template : [1stRowLineName] 1stRowLength [2ndRowLineName] 2ndRowLength .... [LastRowLineName] / [1stColumnLineName] 1stColumnLength [2ndColumnLineName] 2ndColumnLength .... [LastColumnLineName];

/*Example for 3x3 grid*/
grid-template : [row1] 1fr [row2] 1fr [rowEnd] / [column1] 1fr [column2] 1fr [columnEnd];

/* In above example 
  row1, row2, rowEnd are the names of row-line number 1, 2, 3
  column1, column2, columnEnd are the names of column-line number 1, 2, 3
*/

Grid Column

To manipulate the grid-item positions as per your wish along columns

  • It tells grid-item, from which column line it has to start & end
  • Contains three properties grid-column-start, grid-column-end & grid-column

Mostly both grid-column-start & grid-column-end used together, that's why we are using grid-column for both.
Syntax

/* 'X' & 'Y' are the column line numbers/names */
 grid-column-start: X;
 grid-column-end: Y;

/*OR*/

/* grid-column: grid-column-start / grid-column-end ; */ 
 grid-column: X / Y;
  • Important! About "span" keyword ,
    It's used with an positive integer (>0) value to specify how many column-lines it will cover after the column-start-line (if used with grid-column-end property ) & before the column-end-line (if used with grid-column-start property )

We are using 3x3 grid below, means 4 lines in each row & column

.grid-container {
 display: grid;
 grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
 grid-gap: 5px;
 height: 200px;
 border: 10px solid #42c6b3;
}

red
2
3
4

Try some, to read comments

.grid-item-red {
/* grid-column: grid-column-start / grid-column-end ; */ 
 grid-column:1/3;
}
grid-columnsubject
grid-columnclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-gap: 10px;
  height: 200px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color:white;
}
.grid-item-red{
  background-color:red !important;
/* grid-column: grid-column-start / grid-column-end ; */ 
  grid-column:1/3;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item-red">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>
Try some:
Hide grid
grid-column-start:2;
grid-column-end:4;
grid-column-start:3;
grid-column-end:4;
grid-column: 1/3;
grid-column: 2/3;
grid-column: 2/span 2;
grid-column: 1/span 3;
grid-column: span 2/4;
  • If using only one of the single property then the other will be set automatically like :
/*if only using grid-column-start: X , then */
 grid-column-end:X+1;

 /*OR*/

/*if only using grid-column-end: X , then */
 grid-column-start:X-1;


Grid Row

To manipulate the grid-item positions as per your wish along rows

  • It tells grid-item, from which row line it has to start & end
  • Contains three properties grid-row-start, grid-row-end & grid-row

Mostly both grid-row-start & grid-row-end used together, that's why we are using grid-row for both.
Syntax

/* 'X' & 'Y' are the row line numbers/names */
 grid-row-start: X;
 grid-row-end: Y;

/*OR*/

/* grid-row: grid-row-start / grid-row-end ; */ 
 grid-row: X / Y;
  • Important! About "span" keyword ,
    It's used with an positive integer (>0) value to specify how many row-lines it will cover after the row-start-line (if used with grid-row-end property ) & before the row-end-line (if used with grid-row-start property )

We are using 3x3 grid below, means 4 lines in each row & column

.grid-container {
 display: grid;
 grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
 grid-gap: 5px;
 height: 200px;
 border: 10px solid #42c6b3;
}

red
2
3
4

Try some, to read comments

.grid-item-red {
/* grid-row: grid-row-start / grid-row-end ; */ 
 grid-row:1/3;
}
grid-rowsubject
grid-rowclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-gap: 5px;
  height: 200px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color:white;
}
.grid-item-red{
  background-color:red !important;
/* grid-row: grid-row-start / grid-row-end ; */ 
  grid-row:1/3;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item-red">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>
Try some:
Hide grid
grid-row-start:2;
grid-row-end:4;
grid-row-start:3;
grid-row-end:4;
grid-row: 1/3;
grid-row: 2/3;
grid-row: 2/span 2;
grid-row: 1/span 3;
grid-row: span 2/4;
  • If using only one of the single property then the other will be set automatically like :
/*if only using grid-row-start: X , then */
 grid-row-end:X+1;

 /*OR*/

/*if only using grid-row-end: X , then */
 grid-row-start:X-1;


grid-auto-flow

'dense' keyword helps to fill in empty cells earlier in the grid if smaller items come up later


Conditions in which empty cells can be created

Condition-1

when container set to grid-auto-flow:row; and you are changing grid-items via column

Hide grid
1
2
3
4
red
6
7

Try, to read comments

grid-auto-flow:
.grid-container {
 grid-auto-flow: row; /*default*/
}
.grid-item-red {
 grid-column:1/2;
}
grid-auto-flowsubject
grid-auto-flowclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-auto-flow: row; /*default*/
  grid-gap: 5px;
  height: 200px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color:white;
}
.grid-item-red{
  background-color:red !important;
  grid-column:1/2;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="grid-item-red">red</div>
  <div>6</div>
  <div>7</div>
</div>
</body>
</html>

Condition-2

when container set to grid-auto-flow:column; and you are changing grid-items via row

Hide grid
1
2
3
4
red
6
7

Try, to read comments

grid-auto-flow:
.grid-container {
 grid-auto-flow: column;
}
.grid-item-red {
 grid-row:1/2;
}
grid-auto-flowsubject
grid-auto-flowclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-auto-flow: column;
  grid-gap: 5px;
  height: 200px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color:white;
}
.grid-item-red{
  background-color:red !important;
  grid-row:1/2;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div class="grid-item-red">red</div>
  <div>6</div>
  <div>7</div>
</div>
</body>
</html>


Grid Area

To set grid-column-start, grid-column-end, grid-row-start and grid-row-end in a single declaration.
And also gives grid-item a name so that it can be positioned according to the area created with the grid-template-areas property.


Syntax

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

We are using the same 3x3 grid below, means 4 lines in each row & column

red
2
3
4

Try some, to read comments

.grid-item-red {
/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end ; */ 
 grid-area: 1/2/3/4;
}
grid-areasubject
grid-areaclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
  grid-gap: 5px;
  height: 200px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color:white;
}
.grid-item-red{
  background-color:red !important;
/* grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end ; */ 
 grid-area: 1/2/3/4;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item-red">1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>
Try some:
Hide grid
grid-row-start:1;
grid-column-start:2;
grid-row-end:4;
grid-column-end:4;
grid-area: 1/2/3/4;
grid-area: 2/1/3/4;
grid-area: 2/1/3/3;
grid-area: 2/2/span 2/4;

When using with grid-template-areas property

Syntax

grid-area : AnyName

Check this in grid-template-areas property inside parent properties



  • Grid Functions
❮ Prev Grid Parent Properties
Next ❯Grid Functions
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯