Categories
Web development

How to create an expanding grid with CSS & JavaScript?

How to create an expanding grid with CSS & JavaScript?

To create an expanding grid with CSS & JavaScript follow the steps below:

Demo:

*click on the box to see the effect.

Step1.

Add HTML

<div class="col-container">
  <div class="column" onclick="tabExtend('aboutUs')" style="background-color:#2a9d8f;">
    About
  </div>
  <div class="column" onclick="tabExtend('services')" style="background-color:#e9c46a;">
    Services
  </div>
  <div class="column" onclick="tabExtend('contact')" style="background-color:#e76f51;">
    Contact
  </div>
</div>

<div id="aboutUs" class="expandedTab">
  <span onclick="this.parentElement.style.display='none'" class="close">&times;</span>
  <h2>About Us:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>

<div id="services" class="expandedTab">
  <span onclick="this.parentElement.style.display='none'" class="close">&times;</span>
  <h2>Services:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>

<div id="contact" class="expandedTab">
  <span onclick="this.parentElement.style.display='none'" class="close">&times;</span>
  <h2>Contact:</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.column {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  float: left;
  width: 33.33%;
  padding: 70px;
  font-size: 30px;
  cursor: pointer;
  color: white;
}

.expandedTab {
  padding: 70px;
  color: white;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}

.close {
  float: right;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

#aboutUs, #services, #conact {
  display: none;
}

#aboutUs {
  background-color:#2a9d8f;
}

#services {
  background-color:#e9c46a;
}

#contact {
  background-color:#e76f51;
}

p {
  font-size: 20px;
}

Step3.

Add JavaScript

function tabExtend(name) {
  var i, x;
  x = document.getElementsByClassName("expandedTab");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  document.getElementById(name).style.display = "block";
}

Enjoy coding!

Read also:

CSS Conic-Gradient

How to create a custom checkbox and radio button with CSS?

CSS Pseudo-elements

Categories
Web development

How to create a responsive two-column layout?

How to create a responsive two-column layout?

To create the CSS responsive two-column layout (two equal columns, or two unequal columns) follow the steps below:

Demo (two equal columns):

Column 1

Add some text here..

Add some text here..

Add some text here..

Add some text here..

Column 2

Add some text here..

Add some text here..

Add some text here..

Add some text here..

*resize the browser window to see the responsive effect.


Step1.

Add HTML

Create the column container and add two columns:

<div class="content">
  <div class="col" style="background-color:#2a9d8f;">
    <h4>Column 1</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
  <div class="col" style="background-color:#e9c46a;">
    <h4>Column 2</h4>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
    <p>Add some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

.col {
  float: left;
  width: 50%;
  padding: 10px;
}

.content:after {
  content: "";
  display: table;
  clear: both;
}

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .col {
    width: 100%;
  }
}

Demo (two unequal columns):

Column 1

Add Some text here..

Add Some text here..

Add Some text here..

Add Some text here..

Column 2

Add Some text here..

Add Some text here..

Add Some text here..

Add Some text here..

*resize the browser window to see the responsive effect.


Step1.

Add HTML

Create the column container and add two columns:

<div class="col-container">
  <div class="col-1 left" style="background-color:#2a9d8f;">
    <h4>Column 1</h4>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
  </div>
  <div class="col-1 right" style="background-color:#e9c46a;">
    <h4>Column 2</h4>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
    <p>Add Some text here..</p>
  </div>
</div>

Step2.

Add CSS

* {
  box-sizing: border-box;
}

.col-1 {
  float: left;
  padding: 10px;
}

.left {
  width: 40%;
}

.right {
  width: 60%;
}

.col-container:after {
  content: "";
  display: table;
  clear: both;
}
  

Add the CSS @media rule to stack the columns vertically on small screens (resize the browser window to see the effect):

@media screen and (max-width: 600px) {
  .col-1 {
    width: 100%;
  }
}

Enjoy coding!

Read also:

CSS Grid

CSS Columns

Categories
Web development

CSS Grid Layout

The CSS Grid Layout makes it easier to design web pages without having to use floats and positioning.

Example:

<!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-container1 {
  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-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container1">
  <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

The CSS grid layout contains a parent element (container), with one or more child elements:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}
.grid-item {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

To create an HTML grid container set display property value to grid or inline-gird:

display: grid;

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #e9c46a;
  padding: 10px;
}
.grid-item {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

display: inline-grid;

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

.grid-item1 {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

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

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

Grid columns and rows:

The vertical lines of grid items are columns, and the horizontal lines of grid items are rows:

CSS Grid columns and rows

The spaces between each column/row are gaps:

CSS row gap and CSS column gap

To adjust the gap size use the following properties:

Example (column-gap):

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

.gridItem {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gridContainer">
  <div class="gridItem">1</div>
  <div class="gridItem">2</div>
  <div class="gridItem">3</div>  
  <div class="gridItem">4</div>
  <div class="gridItem">5</div>
  <div class="gridItem">6</div>  
  <div class="gridItem">7</div>
  <div class="gridItem">8</div>
  <div class="gridItem">9</div>  
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

Example (row-gap):

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

.gridItem1 {
  background-color: #f4a261;
  border: 2px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="gridContainer1">
  <div class="gridItem1">1</div>
  <div class="gridItem1">2</div>
  <div class="gridItem1">3</div>  
  <div class="gridItem1">4</div>
  <div class="gridItem1">5</div>
  <div class="gridItem1">6</div>  
  <div class="gridItem1">7</div>
  <div class="gridItem1">8</div>
  <div class="gridItem1">9</div>  
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

Example (gap):

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

.grid-item2 {
  background-color: #f4a261;
  border: 1px solid #333;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}
</style>
</head>
<body>

<div class="grid-container2">
  <div class="grid-item2">1</div>
  <div class="grid-item2">2</div>
  <div class="grid-item2">3</div>  
  <div class="grid-item2">4</div>
  <div class="grid-item2">5</div>
  <div class="grid-item2">6</div>  
  <div class="grid-item2">7</div>
  <div class="grid-item2">8</div>
  <div class="grid-item2">9</div>  
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

Grid lines

The lines between columns are column lines, and the lines between rows are row lines.

css grid lines

Example:

Place a grid item at column line 1, and let it end on column line 3:

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

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

.itemOne {
  grid-column-start: 1;
  grid-column-end: 3;
}
</style>
</head>
<body>

<div class="grid-container3">
  <div class="itemOne">1</div>
  <div class="itemTwo">2</div>
  <div class="itemThree">3</div>  
  <div class="itemFour">4</div>
  <div class="itemFive">5</div>
  <div class="itemSix">6</div>
  <div class="itemSeven">7</div>
  <div class="itemEight">8</div>  
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8

CSS Grid Properties:

column-gap – defines the gap between the columns.

gap – a shorthand property for the row-gap and the column-gap properties.

grid – a shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties.

grid-area – a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties.

grid-auto-columns – defines a default column size.

grid-auto-flow – defines how auto-placed items are inserted in the grid.

grid-auto-rows – defines a default row size.

grid-column – a shorthand property for the grid-column-start and the grid-column-end properties.

grid-column-end – defines where to end the grid item.

grid-column-start – defines where to start the grid item.

grid-row – a shorthand property for the grid-row-start and the grid-row-end properties.

grid-row-end – defines where to end the grid item.

grid-row-start – defines where to start the grid item.

grid-template – a shorthand property for the grid-template-rows, grid-template-columns and grid-template-areas properties.

grid-template-areas – defines how to display columns and rows, using named grid items.

grid-template-columns – defines the size of the columns, and how many columns are in a grid layout.

grid-template-rows – defines the size of the rows in a grid layout.

Enjoy coding!

Read also:

CSS Columns

CSS Advanced

Categories
Web development

CSS grid Property

CSS grid Property

The CSS grid property is a shorthand property for:

Syntax:

grid: none|grid-template-rows / grid-template-columns|grid-template-areas|grid-template-rows / [grid-auto-flow] grid-auto-columns|[grid-auto-flow] grid-auto-rows / grid-template-columns

none (default) – no specific sizing of the columns or rows.

grid-template-rows / grid-template-columns – defines the size(s) of the columns and rows.

grid-template-areas – defines the grid layout using named items.

grid-auto-rows / grid-template-columns – defines the auto size of the rows, and sets the grid-template-columns property.

grid-template-rows / grid-auto-flow grid-auto-columns – defines the size (height) of the rows, and how to place auto-placed items, and the auto-size of the columns.

grid-auto-flow grid-auto-rows /grid-template-columns – defines how to place auto-placed items, and the auto-size of the rows, and sets the grid-template-columns property.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid: 75px / 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;
}
</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

Example2:

<!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-container1 {
  display: grid;
  grid:
  '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-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container1">
  <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 row-gap Property

CSS gap Property

Categories
Web development

CSS grid-auto-flow Property

CSS grid-auto-flow Property

The CSS grid-auto-flow property decides how auto-placed items get inserted into the grid.

Syntax:

grid-auto-flow: row|column|dense|row dense|column dense;

row (default) – places items by filling each row.

column – places items by filling each column.

dense – place items to fill any holes in the grid.

row dense – places items by filling each row, and fill any holes in the grid.

column dense – places items by filling each column, and fill any holes in the grid.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.item3 { grid-column: auto / span 2; }

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 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;
}
</style>
</head>
<body>

<h4>grid-auto-flow: row;</h4>
<div class="grid-container" style="grid-auto-flow: row;">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>
<h4>grid-auto-flow: row dense;</h4>
<div class="grid-container" style="grid-auto-flow: row dense;">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
</div>

</body>
</html>

Output:

grid-auto-flow: row;

1
2
3
4

grid-auto-flow: row dense;

1
2
3
4

Enjoy coding!

Read also:

CSS gap Property

CSS row-gap Property

Categories
Web development

CSS grid-auto-columns Property

CSS grid-auto-columns Property

The CSS grid-auto-columns property sets the size for the columns in a grid container.

grid-auto-columns: auto|max-content|min-content|length;

auto (default) – the size of the columns is determined by the size of the container.

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

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

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

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }

.grid-container {
  display: grid;
  grid-auto-columns: 100px;
  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

Enjoy coding!

Read also:

CSS grid-row-start Property

CSS Columns

Categories
Web development

CSS grid-auto-rows Property

CSS grid-auto-rows Property

The CSS grid-auto-rows property sets the size for the rows in a grid container.

Syntax:

grid-auto-rows: auto|max-content|min-content|length;

auto (default) – the size of the rows is defined by the size of the largest item 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>
.item1 { grid-area: 1 / 1 / 2 / 2; }
.item2 { grid-area: 1 / 2 / 2 / 3; }
.item3 { grid-area: 1 / 3 / 2 / 4; }
.item4 { grid-area: 2 / 1 / 3 / 2; }
.item5 { grid-area: 2 / 2 / 3 / 3; }
.item6 { grid-area: 2 / 3 / 3 / 4; }

.grid-container {
  display: grid;
  grid-auto-rows: 100px;
  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

Enjoy coding!

Read also:

CSS Grid

CSS grid-template-areas Property

CSS Columns

Categories
Web development

CSS grid-template Property

CSS grid-template Property

The CSS grid-template property is a shorthand property for the following properties:

Syntax:

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

none (default) – no specific sizing of the columns or rows.

grid-template-rows – defines the size(s) of the rows.

grid-template-columns – defines the size(s) of the columns.

grid-template-areas – defines the grid layout using named items.

Example1:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template: 200px / 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;
}
</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

Example2:

<!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-container1 {
  display: grid;
  grid-template:
    '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-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<div class="grid-container1">
  <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-column-end Property

CSS grid-column Property

Categories
Web development

CSS grid-template-columns

CSS grid-template-columns

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

Syntax:

grid-template-columns: none|auto|max-content|min-content|length;

none (default) – columns are created if needed.

auto – the size of the columns is determined by the size of the container and by the size of the content of the items in the column.

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

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

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

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;
}
</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:

<!DOCTYPE html>
<html>
<head>
<style>

.grid-container1 {
  display: grid;
  grid-template-columns: 100px 150px auto 150px;
  grid-gap: 10px;
  background-color: #e9c46a;
  padding: 10px;
}

.grid-container1 > div {
  background-color: #f4a261;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</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-area Property

CSS gap Property

Categories
Web development

CSS grid-template-areas Property

CSS grid-template-areas Property

The CSS grid-template-areas property defines areas within the grid layout.

You can name grid items by using the CSS grid-area property, and then reference to the name in the CSS grid-template-areas property.

Syntax:

grid-template-areas: none|itemnames;

none (default) – no named grid areas.

itemnames – a sequence that defines how each column and row should display.

Example1:

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

.grid-container {
  display: grid;
  grid-template-areas: 'exampleArea exampleArea . . .';
  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 class="item9">9</div>
</div>

</body>
</html>

Output:

1
2
3
4
5
6
7
8
9

Example2:

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!

CSS gap Property

CSS grid-column-start Property