Tag: grid

Categories
Web development

CSS grid-template-rows

CSS grid-template-rows

The CSS grid-template-rows property defines the number (and the heights) of the rows in a grid layout.

Syntax:

grid-template-rows: none|auto|max-content|min-content|length

none – no size is set.

auto – the size of the rows is determined by the size of the container and by the size of the content of the items in the row.

max-content – the size of each row depends on the largest item in the row.

min-content – the size of each row depends on the smallest item in the row.

length – sets the size of the rows, by using a legal length value.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-rows: 100px 200px;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8

Enjoy coding!

Read also:

CSS grid-column-end Property

CSS grid-row Property

Categories
Web development

CSS grid-area Property

CSS grid-area Property

The CSS grid-area property defines a grid item’s size and location in a grid layout, and is a shorthand property for the following properties:

The CSS grid-area property can also be used to assign a name to a grid item. Named grid items can then be referenced by the grid-template-areas property of the grid container.

Syntax: 

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

grid-row-start – defines on which row to start displaying the item.

grid-column-start – defines on which column to start displaying the item.

grid-row-end – defines on which row-line to stop displaying the item, or how many rows to span.

grid-column-end – defines on which column-line to stop displaying the item, or how many columns to span.

itemname – defines a name for the grid item.

grid-area: 2 / 1 / span 2 / span 3;

is a shorthand for:

grid-row-start: 2;
grid-column-start:1;
grid-row-end: span 2;
grid-column-end: span 3;

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-area: 2 / 1 / span 2 / span 3;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7

Example2:

Item1, is called “example-area” and will take up the place of all five columns:

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: example-area;
}

.grid-container {
  display: grid;
  grid-template-areas: 'example-area example-area example-area example-area example-area';
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6

Example3:

Name all items, and make a ready-to-use webpage template:

<!DOCTYPE html>
<html>
<head>
<style>
.item-1 { grid-area: header; }
.item-2 { grid-area: menu; }
.item-3 { grid-area: main; }
.item-4 { grid-area: side; }
.item-5 { grid-area: footer; }

.grid-container2 {
  display: grid;
  grid-template-areas:
  'header header header header header header'
  'menu main main main side side'
  'menu footer footer footer footer footer';
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container2 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container2">
  <div class="item-1">Header</div>
  <div class="item-2">Menu</div>
  <div class="item-3">Main</div>  
  <div class="item-4">Side</div>
  <div class="item-5">Footer</div>
</div>

</body>
</html>

Output:

Header
Menu
Main
Side
Footer

Enjoy coding!

Read also:

CSS grid-row-start Property

CSS Columns

Categories
Web development

CSS grid-column Property

CSS grid-column Property

The CSS grid-column property defines a grid item’s size and location in a grid layout, and is a shorthand property for the following properties:

Syntax:

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

grid-column-start – defines on which column to start displaying the item.

grid-column-end – defines on which column-line to stop displaying the item, or how many columns to span.

grid-column: 1 / span 2;

is a shorthand for:

grid-column-start: 1;
grid-column-end: span 2;

Example:

Item1 will start on column 1, and span 2 columns:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column: 1 / span 2;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7

Enjoy coding!

Read also:

CSS grid-row Property

CSS Columns

Categories
Web development

CSS grid-column-start Property

CSS grid-column-start Property

The CSS grid-column-start property specifies on which column-line the item will start.

Syntax:

grid-column-start: auto|span n|column-line;

auto (default) – the item will be placed following the flow.

span n – defines the number of columns the item will span.

column-line – defines on which column to start the display of the item.

Example:

Item1 will start on column 2:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 2;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6

Enjoy coding!

Read also:

CSS grid-auto-flow Property

CSS Columns

Categories
Web development

CSS grid-row-end Property

CSS grid-row-end Property

The CSS grid-row-end property specifies how many rows an item will span, or on which row-line the item will end.

Syntax:

grid-row-end: auto|integer|span n;

auto (default) – the item will span one row.

integer – defines the row on which the item ends.

span n – defines the number of rows the item will span.

Example1:

Item1 will span 2 rows:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-row-end: span 2;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8

Example2:

Item-1 will end on row-line 4:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item-1 {
  grid-row-end: 4;
}
</style>
</head>
<body>

<div class="grid-container1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>  
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8

Enjoy coding!

Read also:

CSS grid-template-columns

CSS grid Property

Categories
Web development

CSS grid-row-start Property

CSS grid-row-start Property

The CSS grid-row-start property specifies on which row-line the item will start.

Syntax:

grid-row-start: auto|row-line;

auto (default) – the item will be placed by following the flow.

row-line – defines on which row to start the display of the item.

Example1 (auto):

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container > div {
  background-color: #f4a261;
  text-align: center;
  padding: 25px 0;
  font-size: 30px;
}

.item1 {
  grid-row-start: auto;
}
</style>
</head>
<body>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8

Example2 (row-line):

Make “item-1” start on row 2:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container1 {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 25px 0;
  font-size: 30px;
}

.item-1 {
  grid-row-start: 2;
}
</style>
</head>
<body>

<div class="grid-container1">
  <div class="item-1">1</div>
  <div class="item-2">2</div>
  <div class="item-3">3</div>  
  <div class="item-4">4</div>
  <div class="item-5">5</div>
  <div class="item-6">6</div>
  <div class="item-7">7</div>
  <div class="item-8">8</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8

Enjoy coding!

Read also:

CSS Grid Layout

CSS Columns

Categories
Web development

CSS gap Property

CSS gap Property

The CSS gap property specifies the size of the space between the rows and columns. It is a shorthand for the following properties:

Syntax:

gap: row-gap column-gap;

row-gap – sets the size of the space between the rows in a grid layout.

column-gap – sets the size of the space between the columns in a grid layout.

gap: 20px 20px;

is a shorthand for:

row-gap: 20px;
column-gap: 25px;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px 25px;
}
.grid-container > div {
  border: 1px solid #333;
  background-color: #e9c46a;
}
</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>7</div>  
  <div>8</div>  
  <div>9</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

Enjoy coding!

Read also:

CSS grid-auto-flow Property

CSS Grid Layout

Categories
Web development

CSS row-gap Property

CSS row-gap Property

The CSS row-gap property defines the space between the grid rows.

Syntax:

row-gap: length|normal;

length – a defined length or % that will set the space between the rows.

normal (default) – defines a normal space between the rows.

Example:

<!DOCTYPE html>
<html>
<head>
<style> 
.grid-container {
  display: grid;
  row-gap: 20px;
}
.grid-container > div {
  border: 1px solid #333;
  background-color: #e9c46a;
}
</style>
</head>
<body>

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
</div>

</body>
</html>

Output:

1
2
3
4

Enjoy coding!

Read also:

CSS grid-auto-columns Property

CSS column-gap Property