CSS3 Grid Parent Properties

Parent properties are used to structure the layout for its grid-items (direct child)

Grid Parent properties
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- column-gap
- row-gap
- gap
- grid-auto-flow
- grid-auto-columns
- grid-auto-rows
- grid

You should know first :

Message : Try, to see comments !

Try :

Columns Rows Column-gap Row-gap

Note! The new fr unit work like maths ratio concept

grid-template-columns

To set the number of columns of a grid and specify the width of it

Try some, to read comments

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

grid-template-columns

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 10px;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>

Try some:

grid-template-columns: 1fr 1fr 1fr;

grid-template-columns: 1fr 1fr;

grid-template-columns: 50px 50px 100px;

grid-template-columns: 100px 100px;

grid-template-columns: 30% 60%;

grid-template-columns: 30% 40% auto;

grid-template-rows

To set the number of rows of a grid and specify the height of it

You must define 'height' property if using % unit
If using fr unit then it's better to define 'height' property
Remember! If grid-items exceeds the total defined rows then it will automatically add next row

Below, we already set the column as 2 columns

Try some, to read comments

.grid-container {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: 1fr 1fr;
 gap: 10px;
 height: 150px;
 border:10px solid #42c6b3;
}

grid-template-rows

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
  height: 150px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
}
</style>
</head>
<body><div className="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>

Try some:

grid-template-rows: 1fr 1fr 1fr;

grid-template-rows: 1fr 1fr;

grid-template-rows: 40px 80px;

grid-template-rows: 60px 60px;

grid-template-rows: 30% 50%;

grid-template-rows: 30% auto;

grid-template-areas

To set area structure for grid-items

Area means combination of columns or rows
Area combination can only be in square or in rectangle shape format
Columns & Rows are also called as CELL in grid

We are using 3x3 grid below

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

<div className="grid-container">
<!--Must include grid-area of specific grid-items-->
  <div style="grid-area:red">1</div>
  <div style="grid-area:yellow">2</div>
  <div style="grid-area:blue">3</div>
  <div style="grid-area:green">4</div>
</div>

Note! Repeating the grid-area value for grid-items will overlap. So, try to use unique names for each grid-items

Try some, to read comments

.grid-container {
 grid-template-areas:'red red red'
  'yellow yellow blue'
  'green green green';
}

grid-template-areas

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas:'red red red'
    'yellow yellow blue'
    'green green green';
  gap: 10px;
  height: 200px;
  border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div style="grid-area:red;background-color:red">1</div>
  <div style="grid-area:yellow;background-color:yellow">2</div>
  <div style="grid-area:blue;background-color:blue">3</div>
  <div style="grid-area:green;background-color:green">4</div>
</div>
</body>
</html>

Try some:

Hide grid

grid-template-areas: 'red red red'
    'yellow yellow blue'
    'yellow yellow green';

grid-template-areas: 'red red red'
    'yellow yellow blue'
    '. green green';

grid-template-areas: 'yellow red red'
    'yellow red red'
    'yellow blue green';

grid-template-areas: 'red red'
    'yellow blue'
    'green blue';

grid-template

To set grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration

Syntax

grid-template: none | grid-template-rows / grid-template-columns;

Use grid-template-areas after grid-template. since it sets its value to none
Remember! Colums refers to setting the width of each column, & Rows refers to setting the height of each row

Try some, to read comments

.grid-container {
 display: grid;
/* grid-template: grid-template-rows / grid-template-columns ;*/
 grid-template: 1fr 1fr / 1fr 1fr;
 gap: 10px;
 border:10px solid #42c6b3;
}

grid-template

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
/* grid-template: grid-template-rows / grid-template-columns ;*/
 grid-template: 1fr 1fr / 1fr 1fr;
 gap: 10px;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>

Try some:

grid-template: 1fr 1fr / 1fr 1fr 1fr;

grid-template: 1fr 1fr / 1fr 1fr;

grid-template: 50px / 50px 100px;

grid-template: 50px 50px / 100px 100px;

grid-template: 40px 60px / 30% 60%;

Grid Gap

To set the gap between the rows & columns

Column 1

Column 2

Column 1

Column 2

column-gap: 10px;

.grid-container {
  column-gap: 10px;
}

column-gap

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template: 1fr 1fr / 1fr 1fr;
 column-gap: 10px;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 1</div>
  <div>Column 2</div>
</div>
</body>
</html>

Row 1

Row 2

row-gap: 10px;

.grid-container {
  row-gap: 10px;
}

row-gap

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template: 1fr 1fr / 1fr 1fr;
 row-gap: 10px;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>Row 1</div>
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 2</div>
</div>
</body>
</html>

row-gap

column-gap

gap: 10px 15px;

.grid-container {
/*gap: row-gap  column-gap ;*/
  gap: 10px 15px;
}

gap

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template: 1fr 1fr / 1fr 1fr;
 gap: 10px 15px;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
</body>
</html>

Note! If gap value set to a single value then it will assign that single value to both the properties

grid-auto-flow

To set the grid-items arranging order row-wise(default) or column-wise

Try, to read comments

grid-auto-flow:

.grid-container {
 display: grid;
 grid-template: 1fr 1fr /1fr 1fr 1fr;
 grid-auto-flow:row;
 gap: 10px;
}

grid-auto-flow

<!DOCTYPE html>
<html>
<head>

<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template: 1fr 1fr / 1fr 1fr 1fr;
 gap: 10px;
 grid-auto-flow:row;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
</body>
</html>

Note! There are two more value left grid-auto-flow: row dense; & grid-auto-flow: column dense; described in the grid child properties to make you understand well

grid-auto-columns

To set the extra grid-items width when number of grid-items exceeds the grid length

Only works when grid-auto-flow:column
In simple words, to set the default grid-items width

In below example :

using grid length of 2x2,
  means 4 actual grid-items(from top) : 1,2,3,4
  and others are extra grid-items : 5,6

Try, to see the comments

grid-auto-columns:

.grid-container {
 display: grid;
 grid-template: 1fr 1fr /1fr 1fr;
 grid-auto-flow:column;
 grid-auto-columns:auto;
 gap: 10px;
}

grid-auto-columns

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

grid-auto-rows

To set the extra grid-items height when number of grid-items exceeds the grid length

Only works when grid-auto-flow:row,
if you are not setting it, no-problem, it's a default value
In simple words, to set the default grid-items height

In below example :

using grid length of 2x2,
  means 4 actual grid-items(from top) : 1,2,3,4
  and others are extra grid-items : 5,6

Try, to see the comments

grid-auto-rows:

.grid-container {
 display: grid;
 grid-template: 1fr 1fr /1fr 1fr;
 grid-auto-flow:row;
 grid-auto-rows:auto;
 gap: 10px;
 height:180px;
}

grid-auto-rows

<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
.grid-container {
 display: grid;
 grid-template: 1fr 1fr / 1fr 1fr;
 grid-auto-flow:row;
 grid-auto-rows:auto;
 gap: 10px;
 height:180px;
 border:10px solid #42c6b3;
}
.grid-container div{
  background-color: #3e3737;
  text-align: center;
  color: white;
  line-height: 40px;
}
</style>
</head>
<body>
<div className="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
</body>
</html>

grid

To set grid-template, grid-template-rows, grid-template-columns, grid-auto-flow, grid-auto-columns and grid-auto-rows in a single declaration

/* Syntax - To set with default values */

grid: none;

/* Syntax - To set grid-template */

/* grid: grid-template;
Example: */
grid: 1fr 1fr / 1fr 1fr;

/* Syntax - To set grid-auto-flow:row */

/* grid: auto-flow / grid-template-columns ;
Example: */
grid: auto-flow / 1fr 1fr;

/* If using row dense */
grid: auto-flow dense / 1fr 1fr;

/* Syntax - To set grid-auto-flow:row + grid-auto-rows */

/* grid: auto-flow grid-auto-rows / grid-template-columns ;
Example: */
grid: auto-flow 30px / 1fr 1fr;

/* Syntax - To set grid-auto-flow:column */

/* grid: grid-template-rows / auto-flow;
Example: */
grid: 1fr 1fr / auto-flow;

/* If using column dense */
grid: 1fr 1fr / auto-flow dense;

/* Syntax - To set grid-auto-flow:column + grid-auto-columns */

/* grid: grid-template-rows / auto-flow grid-auto-columns;
Example: */
grid: 1fr 1fr / auto-flow 100px;

To Remember! In syntax above,
the left portion before "/" is all about ROWS
& the right portion is all about COLUMNS

Grid Child Properties

"Learn to Explore..!"

TryOut Editor

Parent Properties