Naming Grid items

Naming grid items offers to assign the names to the grid items. The grid-area property of the grid item and the grid-template-areas property of the grid container are used.

Example 1: The example illustrates naming grid items Property item 1 gets the name navarea and spans to four columns.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="containergrid"> 
        <div class="box" id="box1">grid_Item1</div> 
        <div class="box" id="box2">grid_Item2</div> 
        <div class="box" id="box3">grid_Item3</div> 
        <div class="box" id="box4">grid_Item4</div> 
        <div class="box" id="box5">grid_Item5</div> 
        <div class="box" id="box6">grid_Item6</div> 
        <div class="box" id="box7">grid_Item7</div> 
        <div class="box" id="box8">grid_Item8</div> 
        <div class="box" id="box9">grid_Item9</div> 
    </div> 
</body> 
  
</html>

CSS

.containergrid{ 
    display: grid; 
    grid-template-areas: 'navarea navarea navarea navarea'; 
    gap: 10px; 
    background-color: rgb(159, 206, 159) 
} 
  
#box1{ 
    grid-area: navarea; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
.containergrid>div{ 
   padding: 10px; 
   font-size: 20px; 
} 
  
.box{ 
    border: 2px solid green; 
}

Output:

Output

Example 2: The example illustrates naming grid items Property where item 1 gets the name navarea and spans to two columns.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="containergrid"> 
        <div class="box" id="box1">grid_Item1</div> 
        <div class="box" id="box2">grid_Item2</div> 
        <div class="box" id="box3">grid_Item3</div> 
        <div class="box" id="box4">grid_Item4</div> 
        <div class="box" id="box5">grid_Item5</div> 
        <div class="box" id="box6">grid_Item6</div> 
        <div class="box" id="box7">grid_Item7</div> 
        <div class="box" id="box8">grid_Item8</div> 
        <div class="box" id="box9">grid_Item9</div> 
    </div> 
</body> 
  
</html>

CSS

.containergrid{ 
    display: grid; 
    grid-template-areas: 'navarea navarea . . .'; 
    gap: 10px; 
    background-color: rgb(159, 206, 159) 
} 
  
#box1{ 
    grid-area: navarea; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
.containergrid>div{ 
   padding: 10px; 
   font-size: 20px; 
} 
  
.box{ 
    border: 2px solid green; 
}

Output:

Output

Example 3: The example illustrates naming grid items Property where box1 spans two columns and two rows.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="containergrid"> 
        <div class="box" id="box1">grid_Item1</div> 
        <div class="box" id="box2">grid_Item2</div> 
        <div class="box" id="box3">grid_Item3</div> 
        <div class="box" id="box4">grid_Item4</div> 
        <div class="box" id="box5">grid_Item5</div> 
        <div class="box" id="box6">grid_Item6</div> 
        <div class="box" id="box7">grid_Item7</div> 
        <div class="box" id="box8">grid_Item8</div> 
        <div class="box" id="box9">grid_Item9</div> 
    </div> 
</body> 
  
</html>

CSS

.containergrid { 
    display: grid; 
    grid-template-areas: 'navarea navarea . . ' 'navarea navarea . . '; 
    gap: 10px; 
    background-color: rgb(159, 206, 159) 
} 
  
#box1 { 
    grid-area: navarea; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
.containergrid>div { 
    padding: 10px; 
    font-size: 20px; 
} 
  
.box { 
    border: 2px solid green; 
}

Output:

Output

Example 4: The example illustrates the grid-items Property here all the grid items get the name.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="containergrid"> 
        <div class="box" id="box1">grid_Item1</div> 
        <div class="box" id="box2">grid_Item2</div> 
        <div class="box" id="box3">grid_Item3</div> 
        <div class="box" id="box4">grid_Item4</div> 
        <div class="box" id="box5">grid_Item5</div> 
    </div> 
</body> 
  
</html>

CSS

.containergrid { 
    display: grid; 
    grid-template-areas: 'navarea navarea navarea navarea navarea '
        ' sidebar main main main rsidebar '
        'sidebar footer footer footer rsidebar'
    ; 
    gap: 10px; 
    background-color: rgb(159, 206, 159) 
} 
  
#box1 { 
    grid-area: navarea; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
#box2 { 
    grid-area: sidebar; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
#box3 { 
    grid-area: main; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
#box4 { 
    grid-area: rsidebar; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
#box5 { 
    grid-area: footer; 
    background-color: rgb(73, 147, 122); 
    color: antiquewhite; 
} 
  
  
.containergrid>div { 
    padding: 10px; 
    font-size: 20px; 
} 
  
.box { 
    border: 2px solid green; 
}

Output:

CSS Grid Items

CSS Grid Items are contained in the Grid Container, where for each row, the container will contain one grid item for each column, by default. The Grid Items can also be styled, which will span in multiple columns and/or rows.

Grid Item is a no of child boxes wrapped inside the grid container. There are various properties including, grid-column property, grid-row property, grid-area property, naming grid, and order of the items. These grid items are responsive and work well on all screen sizes.

Table of Content

The grid-column Property
The grid-row Property
The grid area property
Naming Grid items
Order of the items

Tags:

#CSS-Questions #CSS #Web Technologies

The grid area property

Order of the items

Naming Grid items

HTML

CSS

HTML

CSS

HTML

CSS

HTML

CSS

CSS Grid Items

Similar Reads

Contact Us