Tag: grid

Web development

How to create an expanding grid with CSS & JavaScript?

Post author By Lena Stanley
Post date July 13, 2021

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

Tags CSS, grid, JavaScript

Web development

How to create a responsive two-column layout?

Post author By Lena Stanley
Post date July 12, 2021

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..

Column 2

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..

Column 2

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

Tags CSS, grid, two-column

Web development

CSS Grid Layout

Post author By Lena Stanley
Post date July 12, 2021

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

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:

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:

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:

Grid columns and rows:

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

The spaces between each column/row are gaps:

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:

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:

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:

Grid lines

The lines between columns are column lines, and the lines between rows are row 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:

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

Tags CSS, grid, grid layout

Web development

CSS grid Property

Post author By Lena Stanley
Post date July 9, 2021

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:

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

Main

Side

Footer

Enjoy coding!

Read also:

CSS row-gap Property

CSS gap Property

Tags CSS, grid, grid-auto-columns, grid-auto-flow, grid-auto-rows, grid-template-areas, grid-template-columns, grid-template-rows

Web development

CSS grid-auto-flow Property

Post author By Lena Stanley
Post date July 9, 2021

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;

grid-auto-flow: row dense;

Enjoy coding!

Read also:

CSS gap Property

CSS row-gap Property

Tags CSS, grid, grid-auto-flow

Web development

CSS grid-auto-columns Property

Post author By Lena Stanley
Post date July 9, 2021

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:

Enjoy coding!

Read also:

CSS grid-row-start Property

CSS Columns

Tags CSS, grid, grid-auto-columns

Web development

CSS grid-auto-rows Property

Post author By Lena Stanley
Post date July 8, 2021

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:

Enjoy coding!

Read also:

CSS Grid

CSS grid-template-areas Property

CSS Columns

Tags CSS, grid, grid-auto-rows

Web development

CSS grid-template Property

Post author By Lena Stanley
Post date July 8, 2021

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:

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

Main

Side

Footer

Enjoy coding!

Read also:

CSS grid-column-end Property

CSS grid-column Property

Tags CSS, grid, grid-template, grid-template-areas, grid-template-columns, grid-template-rows

Web development

CSS grid-template-columns

Post author By Lena Stanley
Post date July 8, 2021

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:

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:

Enjoy coding!

Read also:

CSS grid-area Property

CSS gap Property

Tags CSS, grid, grid-template-columns

Web development

CSS grid-template-areas Property

Post author By Lena Stanley
Post date July 8, 2021

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:

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

Main

Side

Footer

Enjoy coding!

CSS gap Property

CSS grid-column-start Property

Tags CSS, grid, grid-template-areas